使用webpack加载显示模块模式模块并将其全局使用并作为es6模块使用

时间:2016-04-09 08:47:25

标签: javascript module ecmascript-6 webpack

我计划使用使用webpack和babel的es6模块使用显示模块模式设计设计的全局模块迁移大型浏览器应用程序,并希望逐步执行此操作。

让我们假设一个像这样的全局脚本模块:

var myModule = (function(window, undefined) {
  function myMethod() {
    console.log('myMethod');
  }
  return {
    myMethod: myMethod
  };
})(window);

原始代码库将通过使用脚本标记加载模块来加载模块,然后将其用作全局:

myModule.myMethod();

新代码应该使用这样的模块:

import myModule from './myModule.js';

我没有一次更改所有现有模块,而是寻找一种最初保留模块格式但是作为全局脚本模块和es6模块使用的方法。

1 个答案:

答案 0 :(得分:2)

哇,它在webpack中非常容易。可能是我,但我花了一些时间来理解webpack文档。

这是如何完成的:

安装导出加载程序

requests.get()

使用导出加载程序

npm cache clean

查询之间的npm install exports-loader --save (就在import myModule from 'exports?myModule!./myModule.js'; 之前)实际上是变量的名称,我们将函数的返回分配给行myModule