使用Webpack要求显示模块

Question

我刚刚开始研究Javascript主要提供Webkit所有奇特功能。 我有一个使用揭示模块模式的大小合适的应用程序。 这些模块调用其他模块的公共功能以进行计算并返回结果。

直到我开始考虑在我的html页面中包含数十个脚本之前，使用这种模式的效果很好。 所以，我们在这里

出于这个问题的目的，我提出了一个简单得多的应用程序来说明问题出在我身上。

我在自己的文件中包含两个javascript模块：

// one.js 
require("babel-loader?two!./two.js"); 
var one = (function(){
  two.sayHello(); 
})() 

// two.js
var two = (function(){
  var sayHello = function(){
    console.log('Hello World'); 
  }
  return {
    sayHello: sayHello
  }
})()

我想做的是在one.js使用two.js中的sayHello函数。

因此，首先，我安装了Webpack和exports-loader并创建了以下配置文件：

module.exports = {
  entry: './index.js', 
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,

        loader: "babel-loader",
        query: {
          presets: ['es2015'] 
        }
      }
    ]
  }
}

index.js是我的输入文件，仅包含以下一行：

require('./one.js'); 

现在，当尝试运行此代码时，控制台中出现以下错误：

未捕获的ReferenceError：未定义两个

经过进一步的挖掘，我发现我的编译的bundle.js文件在尝试导入two.js时抛出以下错误：

引发新错误（“模块解析失败：\\ testing_env \\ webpack \\ two.js'import'和'export'可能仅出现在顶层（2：2）\\ n您可能需要适当的加载程序来处理此文件类型。

显然我做错了，我不确定。 我已经尝试了exports-loader和babel-loader但没有任何乐趣。

我应该使用哪个加载器来解析模块依赖性？

任何帮助将不胜感激。

Answer 1

开箱即用的webpack支持CommonJS （与Nodejs实现的模块系统相同） 。 这意味着您需要使用require / export语法来使用这些模块。

要导出模块中的内容，您只需执行以下操作：

// a.js
function a() { console.log("I'm a module '); }

module.exports = a;

然后在其他模块中执行以下操作：

// b.js
const a = require('./a.js');

a(); // I'm a module

require()将仅返回exports对象。 无论您穿什么，都可以在另一个模块中进行检索。

这就是为什么webpack是模块捆绑器，它带有内置的模块系统。 如果您在没有模块捆绑器的情况下直接在浏览器中加载JS文件，并且想要封装数据（在“模块”中），那么转载模块模式更为实用。

如果您没有模块系统，而只是在浏览器中加载JS文件，那么Revelaing模块模式就很有用。 当浏览器中引入ES模块时，JavaScript才没有它自己的模块系统。 这就是为什么人们想出模块模式，以便在浏览器中封装逻辑的原因。 但是现在由于有了webpack之类的工具，并且现在有了ES Modules系统本身，我们可以有一种更好的方法来封装我们的逻辑。

这有意义吗？