javascript - 将非 commonJS 库包含到 Webpack 上下文的好方法是什么？

Question

我想包含一个定义 AngularJS 模块的外部和非 commonJS 库。

什么是正确的方法，因为我显然不能写:

import MyLibrary from 'MyLibraryPath'
angular.module('MyApp', MyLibrary)

编辑-----------

我刚刚完成了:

require('path/myLibrary.js');
angular.module('MyApp', 'moduleName');

而且有效。

这是一个好的做法吗？

Answer 1

是的，如果库不导出 Angular 模块的 name property 也没关系. Angular 在设计时并没有考虑到 JS 模块，它最初提倡 angular.module('MyApp', ['moduleName']) 模块定义风格。

从模块中导出 name 是一种比较流行的约定，尤其是因为它可以做到这一点

import * as MyLibrary from 'MyLibraryPath';

并将其用作

angular.module('MyApp', [MyLibrary]);

如果没有模块导出，可以用Webpack处理exports-loader和

module: {
    loaders: [
        {
            loader: 'exports-loader',
            test: /path\/myLibrary\.js$/,
            query: '"moduleName"'
        }
    ],
},

配置，本质上是将 module.exports = "moduleName"; 添加到模块。

如果您计划为不导出 name 的库发布 PR/创建问题，请使用此 hack 暂时解决此问题。我不建议为了保持代码的一致性而使构建更复杂。