javascript - 设置 Webpack 和 Babel 来转译/填充旧代码

Question

我有一个完整的旧 AngularJS 1.x 应用程序，用于通过 gulp 和 babel 运行。我们正在过渡到较新的 Angular 2+，但我在尝试让 Webpack 实际查找并编译旧文件时遇到了问题。我已尝试按照与此视频几乎相同的说明进行操作:

https://www.youtube.com/watch?v=H_QACBSqRBE

但是 webpack 配置根本不会对现有文件执行任何操作。有没有办法获取旧组件的整个文件夹，没有任何导入或导出？我觉得条目应该遵循导入依赖路径，但这对于旧的 AngularJS 1.x 项目来说并不存在。

在构建过程中不会抛出错误，它只是......不进行转译或填充。

该配置部分的示例:

rules: [
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    }
  }
]

Answer 1

我们最近这样做了。我们创建了“虚拟”入口点文件，以避免必须更改所有 AngularJS 文件以包含 require/import 语句。

./entry-points/feature1.ts

export const importAll = (r: any): void => {
  r.keys().forEach(r);
};
importAll(require.context('./app/feature1', true, /module\.js$/));
importAll(require.context('./app/feature1', true, /(^(?!.*(spec|module)\.js).*\.js)$/));

webpack.config.js

entry: {
  'feature1': './entry-points/feature1.ts'
}

More detail here