将非 commonJS 库包含到 Webpack 上下文中的好方法是什么？答案

【问题标题】：What is a good way to include a non-commonJS library to Webpack context?将非 commonJS 库包含到 Webpack 上下文中的好方法是什么？
【发布时间】：2016-05-16 20:37:34
【问题描述】：

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

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

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

编辑------

我刚刚完成：

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

它有效。

这是一个好习惯吗？

【问题讨论】：

标签： javascript angularjs webpack commonjs

【解决方案1】：

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

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

import * as MyLibrary from 'MyLibraryPath';

并将其用作

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

如果没有模块导出，可以用Webpackexports-loader和

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

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

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

【讨论】：