Question

我正在编写一个angular1 + angular2混合应用程序，它使用webpack作为程序包捆绑器。

在我的代码中，我以这种方式导入一个库（@ angular / upgrade）

@angular/upgrade
├── bundles
│   ├── upgrade-static.umd.js
│   ├── upgrade-static.umd.min.js
│   ├── upgrade.umd.js
│   └── upgrade.umd.min.js
├── index.d.ts
├── index.js
├── index.js.map
├── index.metadata.json
├── package.json
├── static
│   └── package.json
├── static.d.ts
├── static.js.map
├── static.metadata.json
└── static.js

Angular升级库位于node_module文件夹中，具有以下树结构（简化）：

{"main": "../bundles/upgrade-static.umd.js"}

问题是默认情况下webpack解析了我的import语句loading @ angular / upgrade / static.js，这是一个ES6文件，一旦与其余代码捆绑在一起就会产生错误。

我想要webpack做的是加载@ angular / upgrade / static / package.json，其中包含指向umd包的正确主要定义

$.post("{% url 'account_login' %}", {
   "csrfmiddlewaretoken" : document.getElementsByName('csrfmiddlewaretoken')[0].value,
   "login": $('#id_login').val(),
   "password": $('#id_password').val(),
   "remember": $('#id_remember').val() 
   }, 
   function (data, status) {
     // console.log(data);
});

这可以实现吗？

谢谢，加布

Answer 1

虽然这里描述了模块分辨率： https://webpack.github.io/docs/resolving.html 我应该能够默认执行上面描述的操作，以实现我必须使用resolve.alias属性。这是我使用过的配置：

resolve: {
        extensions: [ '.js', '.ts', '' ],
        modulesDirectories: [ path.resolve( __dirname, 'node_modules' ) ],
        alias: {
            '@angular/upgrade/static$': '../../node_modules/@angular/upgrade/bundles/upgrade-static.umd.js'
        }
    },

Answer 2

import UpgradeModule from '@angular/upgrade/bundles/upgrade-static.umd.js';是否有效？

如果package.json位于npm模块的根级别，则Webpack仅跟随package.json中的main，因此在这种情况下，您必须直接访问所需的文件。

如何强制webpack加载库的umd包

2 个答案: