webpack：导出一个ES6捆绑包

Question

我正在尝试创建一个简单的ES6捆绑包，可以在另一个项目中使用（该项目也使用webpack）。

以下是我正在构建的简单文件：

lib.js

const foo = {
  bar: 1
};

export default foo;

这是webpack.config.js文件：

module.exports = {
    entry: [
     './lib.js'
    ],
    output: {
        path: __dirname,
        filename: "dist/bundle.js",
        pathinfo: true
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader?presets[]=es2015', exclude: 'node_modules' }
        ]
    }
    [...]

这是按预期构建的。 问题在于，当尝试在另一个项目中使用它时，导入始终为空，并且不包含我的 foo 对象。

test-app.js

import { foo } from 'lib';

console.log(foo);  // undefined

- Nicolas RAMZ

---

你尝试过在你的.babelrc文件中使用适当的Babel插件，例如"presets": ["es2015"]吗？ - Mihir

这就是我正在做的事情。这是我的 .babelrc 文件：{ "presets": ["es2015"] } - Nicolas RAMZ

我应该补充说明一下，我的库实际上是一个node_module，而主要文件（在package.json文件中）指向由webpack生成的捆绑包。然后使用npm link将其安装到其他项目中。 - Nicolas RAMZ

Answer 1

在Webpack配置文件的加载器部分，您告诉Babel不要编译存在于node_modules目录中的文件。如果您添加第二个加载器条目来仅编译所需的模块或范围，Babel也会进行编译。

以下是一个包含一个模块的示例：

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules\/(?!module_name\/)/
      }
    ]
  }
  ...
}

这里有一个包含特定范围的示例：

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules\/(?!@scope\/)/
      }
    ]
  }
  ...
}

- rxgx