Webpack configuration for compiling module in node

问题:

I have problem with my webpack/babel configuration. I have installed my component-repository (es6 module without webpack configuration inside) as node_module. And in this situation it is not working - I got 'Unexpected token import' error (babel doesn't transpile es6 code)

But If I linked external folder to node_modules (npm link ./../../component-repository) then it is working correctly without any errors. I spent a lot of time on it and still can't solve this problem.

Main problem is how to share react components between various projects. My idea is to add them as dependency.

edit: How to set webpack&babel for project to compile ES6 module from node_modules folder ? Solution with npm link to sibling folder will not work for production.

edit2: Reason why I keep es6 code in module is that on local environment I want to npm link sibling folder with components (I can edit components and then commit changes to their repository). I share components between 3 projects. But on production I want to install them from git repository automatically as dependency

Structure on local env:

• components (also independent git repository)
• project1
  • node_modules
  • components (linked from ../../components)
• project2
  • node_modules
  • components (linked from ../../components)

Structure for production:

• project1
  • node_modules
  • components (as dependency from git repository)

回答1:

Late post but I ran into this exact situation today. For me the problem was caused by the babel require hook:

https://babeljs.io/docs/usage/require/

NOTE: By default all requires to node_modules will be ignored.

Basically, babel was not being used for any require pointing to node_modules. This is why the code worked for npm linked modules, I am guessing babel skips the ignore because the path does not contain node_modules.

I was able to fix this by changing the ignore logic in require hook, like so:

require('babel-register')({
  extensions: [".es6", ".es", ".jsx", ".js"],
  ignore: (absPath) => {
    if (absPath.lastIndexOf('node_modules') > absPath.indexOf('es6_module')) {
      return true;
    } else if (absPath.indexOf('es6_module') > -1) {
      return false;
    } else if (absPath.indexOf('node_modules') > -1) {
      return true;
    }
    return false;
  }
});

Of course, make sure your loader has the same logic:

loaders: [

  {
    test: /\.jsx?$/,
    exclude: (absPath) => {
      if (absPath.lastIndexOf('node_modules') > absPath.indexOf('es6_module')) {
        return true;
      } else if (absPath.indexOf('es6_module') > -1) {
        return false;
      } else if (absPath.indexOf('node_modules') > -1) {
        return true;
      }
      return false;
    }
    loader: 'babel',
    query: {
            cacheDirectory: true,
            presets: ['es2015', 'react']
        }
  }

回答2:

Did you install the es2015 preset?

npm install babel-preset-es2015

First Option

And the loader could look like this then:

loaders: [
  {
    test: /\.jsx?$/,
    exclude: /bower_components/,
    loader: 'babel',
    query: {
            cacheDirectory: true,
            presets: ['es2015', 'react']
        }
  }

This loader should go through all your modules now (but be aware: Also through all node_modules) and compiles them. The preset es2015 is managing your ES6 syntax and transpiles it to es5.

Second Option

Install your own node modules to a own directory

mkdir -p ./install/here/own_packages
npm install --prefix ./install/here <package>

So you can do this in your webpack.config

loaders: [

  {
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
            cacheDirectory: true,
            presets: ['es2015', 'react']
        }
  }

There, all files inside the node_modules folder (and bower_components) are getting ignored. You can install your own npm modules then in src/js/components (or wherever) with the above command line.

回答3:

Many projects that are used as dependencies make sure to compile down to ES5 before an npm publish.

This is useful for a couple reasons.

1. The code can simply be added to a web browser with a <script> and it will work
2. It makes no presumption about the bundling tool that the consuming application will use

One way to achieve this is to pass the library code through babel before publishing to npm.

When setting up, I took inspiration from the React Bootstrap project. But that was mainly because we wanted to build portable, styled components. However, the way they set up the library for use is pretty nice IMO.

After setting up like this, the consuming applications configuration is very simple, because there is no babel compile to be done. The module bundler (like webpack) can then just bundle the module (as it does for other node_modules dependences).