javascript - 使 webpack 库输出与 babel 6 兼容

标签 javascript ecmascript-6 webpack babeljs

Babel的第 6 版更改了 export default 的功能,特别是它与 commonjs require 的关系。

总而言之,在 babel5 之前,require('module') 提供模块的默认导出,现在它总是返回包含模块所有导出的模块对象。 如果只想要默认值,他/她必须使用 require('module').defaultAs explained here, there is very good reasons behind this这个问题的目的不是破坏或破解这种行为。

但是,如果一个人正在构建一个库,他/她通常不想分发一个模块,而是分发他的库的导出值(例如,一个函数,无论内部使用什么模块系统)。 webpack 很好地解决了这个问题以及使用 commonjs 时的 output.library 配置或 AMD .因为以前的 babel 版本允许默认导出需要 commonjs,所以 babel 也兼容这种机制。然而,情况已不再如此:库现在始终提供 es6 模块对象。

这是一个例子。

src/main.js

export default "my lib content";

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'] }
      }
    ]
  }
};

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>

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

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

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

但是我发现这个解决方案很差。人们应该能够在编译级别解决它,而无需更改源代码。 有什么想法吗?

最佳答案

我自己就是这么做的。无论人们喜欢称之为解决方法还是解决方案,似乎都有一个 Babel 插件可以“解决它”。

使用插件 babel-plugin-add-module-exportshttps://stackoverflow.com/a/34778391/1592572 中引用

示例配置

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"]
                }
            }
        ]
    }
};

这会使 Master.Lib1 成为 lib1 而不是 Master.Lib1.default

关于javascript - 使 webpack 库输出与 babel 6 兼容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33678869/

相关文章:

javascript - 聚合物 2 元素中的铁形式 2.0 : function not defined

javascript - 由于某种原因返回 setTimeout 返回 1

webpack - 如何解决参数数量不足或找不到条目。或者,运行 'webpack(-cli) --help'以获得使用信息

Webpack - 如何将非模块脚本加载到全局范围内 window

javascript - Express MongoDB find() 基于 _id 字段

javascript - 在 JSON 调用中使用变量 URL 不起作用?

javascript - 使用 ES6 扩展运算符 react props 语法

webpack - 使用 'lodash-es' 和 create-react-app 减少 bundle 中的 Lodash

javascript - 如何在 JavaScript (Phaser) 中延迟定时器的开始时间

javascript - 在angularjs中动态添加表单字段不起作用