使用Webpack来要求显示模块

Question

我刚开始研究Javascript所提供的所有花哨的东西，主要是Webkit。我有一个体面的大小的应用程序，它使用揭示模块模式。这些模块调用其他模块的公共函数来进行计算并返回结果。

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

为了这个问题的目的，我做了一个更简单的应用程序来演示什么是我的错误。

我必须包含自己的文件中的两个JavaScript模块：

​​

我试图做的是使用内one.js从two.jssayHello功能。

所以，首先，我安装了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'); 

现在，当试图运行此代码，我在控制台中收到以下错误：

Uncaught ReferenceError: two is not defined

随着一点点的挖多，我发现，试图导入two.js当我编译bundle.js文件被扔以下错误：

throw new Error("Module parse failed: \testing_env\webpack\two.js 'import' and 'export' may only appear at the top level (2:2)\nYou may need an appropriate loader to handle this file type.

很显然，我做错了什么，我只是不知道是什么。我已经尝试了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文件，并且想要封装数据（在“模块”中），则更加实用。

的Revelaing module pattern当你没有一个模块系统，你只需加载您的JS文件在浏览器中是非常有用的。当ES模块在浏览器中引入时，直到最终，JavaScript没有自己的模块系统。这就是为什么人们想出了模块模式，以便在浏览器中封装逻辑。但是现在由于像webpack这样的工具，现在我们已经有了本地的系统，我们可以有更好的方式来封装我们的逻辑。

这是否有意义？