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
  }
})()

我尝试做的是在sayHello内使用two.js中的one.js功能。

首先，我安装了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时抛出了以下错误：

抛出新错误（＆＃34;模块解析失败：\ testing_env \ webpack \ two.js ＆＃39;进口＆＃39;和＆＃39;出口＆＃39;可能只出现在最高级别（2：2）\ n您可以需要一个合适的加载器来处理这种文件类型。

显然，我做错了什么，我只是不确定是什么。我已经尝试了exports-loader和babel-loader但没有快乐。

我应该使用哪个加载程序来解析模块依赖项？

非常感谢任何帮助。

Answer 1

开箱即用的webpack支持CommonJS （与Nodejs implements）相同的模块系统。这意味着您需要使用 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 module pattern非常有用。直到在浏览器中引入ES模块时，JavaScript还没有自己的模块系统。这就是为什么人们想出了模块模式，以便有办法在浏览器中封装逻辑。但现在由于像webpack这样的工具，现在我们本身就有ES Modules系统，我们可以有更好的方法来填充我们的逻辑。

这有意义吗？

使用Webpack需要显示模块

1 个答案: