使webpack的库输出与babel6兼容

Question

使webpack的库输出与babel6兼容

Que*_*Roy 15 javascript ecmascript-6 webpack babeljs

巴贝尔的第6版改变了它的功能,export default特别是它与commonjs的关系require.

总而言之,直到babel5,require('module')在给出模块的默认导出的同时,它现在总是返回包含模块的所有导出的模块对象.如果只想要默认值,他/她必须使用require('module').default. 正如这里所解释的,这背后有很好的理由,这个问题的目的不是打破或破解这种行为.

但是,如果正在构建库,他/她通常不希望分发模块,而是分发其库的导出值(例如,函数,内部使用的模块系统).webpack和output.library使用commonjs或AMD时的配置可以很好地解决这个问题.因为先前的babel版本允许使用commonjs进行默认导出,所以babel也与此机制兼容.但事实并非如此:库现在总是提供es6模块对象.

这是一个例子.

SRC/main.js

export default "my lib content";

Run Code Online (Sandbox Code Playgroud)

webpack.config.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: {
    lib: [ path.resolve(__dirname, "src/main.js") ],
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "mylib-build.js",
    library: 'myLib'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel",
        include: path.join(__dirname, "src"),
        query: { presets: ['es2015'] }
      }
    ]
  }
};

Run Code Online (Sandbox Code Playgroud)

的test.html

<html>
<head></head>
<body>
<script src="dist/mylib-build.js"></script>
<!-- `myLib` will be attached to `window` -->
<script>
  console.log(JSON.stringify(myLib)); // { default: "my lib content" }
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是一个非常简单的例子,但我显然希望将mylib导出为字符串"my lib content"而不是{ default: "my lib content" }.

一种解决方案是在commonjs中创建导出源文件以执行转换:

module.exports = require('./main').default;

Run Code Online (Sandbox Code Playgroud)

但是我觉得这个解决方案很差.一个人应该能够在编译级别解决它,而无需更改源代码.任何的想法？

Answer 1

Vic*_*ist 6

就是我的自我.无论是喜欢称之为变通方法还是解决方案,似乎都有一个"解决它"的Babel插件.

使用/sf/answers/2434487401/中引用的插件babel-plugin-add-module-exports

配置示例

var webpackOptions = {
    entry: {
        Lib1: './src/Lib1.js',
        Lib2: './src/Lib2.js'
    },
    output: {
        filename: "Master.[name].js",
        library: ["Master","[name]"],
        libraryTarget: "var"
    },
    module: {
        loaders: [
            {
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: ["add-module-exports"]
                }
            }
        ]
    }
};

Run Code Online (Sandbox Code Playgroud)

这产生Master.Lib1了lib1而不是Master.Lib1.default.

Answer 2

Que*_*Roy 4

Webpack 2现在支持 es6 模块，部分解决了这个问题。从 webpack 1 迁移到 webpack 2相对轻松。只需记住禁用 babel 的 es6 模块到 commonjs 的转换即可使此工作正常进行：

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

Run Code Online (Sandbox Code Playgroud)

然而，不幸的是，它不能在默认导出的情况下正常工作（但提出了一个问题，希望最终会发布解决方案）。

编辑

好消息！Webpack 3 支持output.libraryExport可用于直接公开默认导出的选项：

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: {
    lib: [ path.resolve(__dirname, "src/main.js") ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "mylib-build.js",
    library: "myLib",
    // Expose the default export.
    libraryExport: "default"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel",
        include: path.resolve(__dirname, "src")
      }
    ]
  }
};

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，1 月前
查看次数：	3551 次
最近记录：	8 年，3 月前