如何强制 webpack 加载库的 umd 包

Question

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

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

import { UpgradeModule } from '@angular/upgrade/static';

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

@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

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

我希望 webpack 做的是加载 @angular/upgrade/static/package.json，它包含指向 umd bundle

的正确主要定义

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

可以实现吗？

谢谢，唠叨

Answer 1

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

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

Answer 2

虽然这里描述的模块分辨率： 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'
        }
    },

如何强制 webpack 加载库的 umd 包

how to force webpack to load umd bundle of a library

angularjs

webpack

angular-upgrade