如何通过Webpack打包Vaadin并接入AngularJS v1.x项目

问题解决方案 #

1. 修复打包报错 #

第一步：安装Vaadin依赖

你当前的package.json中没有引入任何Vaadin相关依赖，这是模块找不到的核心原因，执行以下命令安装你需要的Vaadin组件（以vaadin-button为例）：

npm install @vaadin/vaadin-button @vaadin/vaadin-core --save

所有用到的Vaadin组件都需要提前安装到dependencies中。

第二步：调整Webpack配置

修改webpack.config.js中的jsConfig，新增模块解析规则，并调整babel-loader的排除范围：

var jsConfig = Object.assign({}, config, {
  // 原有配置不变，新增以下resolve配置
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'],
    extensions: ['.js'],
    preferRelative: false
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        // 调整exclude规则，允许babel处理@vaadin的代码，适配ES5环境
        exclude: /node_modules\/(?!(@vaadin)\/)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['transform-class-properties', '@babel/plugin-syntax-top-level-await']
          }
        }
      },
      // 新增css处理规则，加载Vaadin组件样式
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ],
  }
});

2. 接入AngularJS v1.x 实现步骤 #

1. 打包完成后，将生成的dist目录下的bundle文件复制到AngularJS项目的静态资源目录，建议将两个entry合并为一个，实现真正的单文件引入。
2. 在AngularJS项目的入口HTML中，先引入Vaadin的打包产物，再加载AngularJS核心脚本。
3. 针对需要双向绑定的Vaadin组件，添加简单的适配指令即可正常使用，示例如下：

// 适配vaadin-button/vaadin-input等组件的双向绑定
angular.module('你的应用名').directive('vaadinComponent', () => {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: (scope, element, attrs, ngModelCtrl) => {
      // 监听web component的value变更事件，同步到AngularJS作用域
      element.on('value-changed', () => {
        scope.$apply(() => {
          ngModelCtrl.$setViewValue(element[0].value);
        });
      });
      // 监听AngularJS模型变更，同步到web component
      ngModelCtrl.$render = () => {
        element[0].value = ngModelCtrl.$viewValue || '';
      };
    }
  };
});

3. 生产模式打包注意事项 #

• 将webpack配置中的mode改为production，自动启用Vaadin组件的生产环境优化
• 如果需要完全剔除外部路径引用，确认output.publicPath配置为相对路径或者你的站点资源根路径即可

内容的提问来源于stack exchange，提问作者Micky