Question

我已经使用webpack构建了3个独立的npm模块。它们都依赖于角度，因为我有这条线：

var angular = require('angular');

在每个npm模块的角度模块定义中。

其中一个模块依赖于另一个模块：

var angular = require('angular');
var ngModule = angular.module('topModule', [
    require('dependency1'),
    require('dependency2')
]);

我相信我收到tried to load angular more than once错误的原因是因为Angular已包含在由webpack构建的所有3个捆绑包中。

据我所知，我可以配置webpack将angular放在一个单独的文件中（例如vendor.js），但我认为当我构建顶级文件时，会看到Angular已经包含在其他2个模块中并且不会再添加它。

我如何使用`require（＆＃39; angular＆＃39;）＆＃39;在所有模块中，但只在顶级模块中包含一次？

Answer 1

我也有这个问题。对我来说，最终我正在使用html-webpack-plugin并传入我自己的模板，就像在webpack.config.js中一样：

plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],

在这个模板文件中，我有一行：

<script src="bundle.js"></script>

这一行由html-webpack-plugin自动注入，因此我两次加载我的包。请参阅plugin docs here。

希望这有帮助！

Answer 2

对于使用npm的用户，请在Symfony中使用webpack encore 由Lerna引导的多个本地软件包：

（webpack.config.js）

...
const path   = require('path');
...
Encore
    ...
    .addAliases({
        'angular': path.resolve(path.join(__dirname, 'node_modules', 'angular'))
    })
    ...

它将所有需要'angular'的内容引用到根node_module文件夹。只是不要忘记在root用户的package.json中添加angular并运行“ npm install”。至于本地软件包，“ lerna bootstrap”，“ lerna exec npm install”，“ npm run encore {desire enviroment}”

Webpack - 警告：尝试多次加载角度。 Angular JS

2 个答案: