将非commonJS库包含到Webpack上下文中的好方法是什么? [英] What is a good way to include a non-commonJS library to Webpack context?

问题描述

我想包括一个定义AngularJS模块的外部和非公共JS库.

I want to include an external and non-commonJS library defining an AngularJS module.

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

What is a proper way to do it since I obviously can't write:

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

编辑---------

我刚做完:

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

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

它有效.

这是一个好习惯吗?

推荐答案

是的，如果该库不导出Angular模块的

Yes, it is fine if the library doesn't export Angular module's name property. Angular wasn't designed with JS modules in mind and originally promotes angular.module('MyApp', ['moduleName']) module definition style.

从模块中导出name是相对流行的约定，特别是因为一个人可以做到

Exporting name from the modules is relatively popular convention, especially because the one can do

import * as MyLibrary from 'MyLibraryPath';

并将其用作

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

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

If there is no module export, it can be treated with Webpack exports-loader and

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

配置，实际上是将module.exports = "moduleName";添加到模块中.

configuration, which essentially adds module.exports = "moduleName"; to the module.

如果您计划对不导出name的库进行PR/创建问题，请使用此hack临时修复此问题.我不建议只是为了保持代码的一致性而使构建更加复杂.

Use this hack to fix this temporarily if you plan to PR/create an issue for the libraries that don't export name. I wouldn't suggest to make the builds more complicated just to keep the code consistent.

这篇关于将非commonJS库包含到Webpack上下文中的好方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！