使用Webpack要求显示模块

Question

I've just started looking into all the fancy stuff Javascript has to offer mainly Webkit . I've got a decent sized application which uses the revealing module pattern. These modules make calls to public functions of other modules to make calculations and return results.

Using this pattern was working great until I started to contemplate having dozens of script includes in my html pages. So, here we are...

For the purposes of the question, I have made a much simpler application to demonstrate what is going wrong for me.

I have two javascript modules contained within their own files:

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

What I'm trying to do is use sayHello function from two.js within one.js .

So, firstly, I installed Webpack and exports-loader and created the following configuration file:

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

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

index.js is my entry file and simply includes the following single line:

require('./one.js'); 

Now, when trying to run this code, I'm getting the following error in the console:

Uncaught ReferenceError: two is not defined

With a little more digging, I found that my compiled bundle.js file was throwing the following Error when trying to import two.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.

Obviously i'm doing something wrong, I'm just not sure what. I've tried both exports-loader and babel-loader but with no joy.

Which loader should I be using to parse module dependencies?

Any help would be greatly appreciated.

Answer 1

Out of the box webpack has support for CommonJS (which is the same module system that Nodejs implements ) . This means that you need to use the require/export syntax to make use of the modules.

To export something in a module you simply do:

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

module.exports = a;

and in your other module you do:

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

a(); // I'm a module

require() will simply returns the exports object. Whatever you put on it you will be able to retrieve in another module.

This is why webpack is a module bundler, it comes with a built in module system. The revelaing module pattern is more practical if you load your JS files directly in the browser without a module bundler, and you want to incapsulate your data (in "modules").

The Revelaing module pattern is useful when you don't have a module system and you simply load up your JS files in the browser. Till recenlty when ES Modules were introduced in the browser, JavaScript didn't have a module system of it's own. This is why people came up with the module pattern, to have a way to incapsulate logic in the browser. But now because of tools like webpack and now we have natively the ES Modules system, we can have a more better way to incapsulate our logic.

Does this make sense?