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对象：

测试app.js

import { foo } from 'lib';

console.log(foo);  // undefined

Answer 1

在Webpack配置的loaders部分，您告诉Babel不要编译bootstrap.php目录中存在的文件。如果你添加第二个加载器条目来编译你需要的模块或范围，Babel也会编译。

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

node_modules

以下是包含特定范围的示例：

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