相关疑难解决方法(0)

使webpack的库输出与babel6兼容

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

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

但是,如果正在构建库,他/她通常不希望分发模块,而是分发其库的导出值(例如,函数,内部使用的模块系统).webpackoutput.library使用commonjsAMD时的配置可以很好地解决这个问题.因为先前的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)

javascript ecmascript-6 webpack babeljs

15
推荐指数
2
解决办法
3551
查看次数

如何全局公开es6模块

我需要编写一个可在全局窗口上使用的模块.
我正在使用es6来创建模块,我定义的每个类都有自己的文件.
我正在使用webpack来babelify并捆绑这些类.
我的模块的入口点也是包含要公开的全局的文件.

我已经尝试过各种方法来实现这个可能性,包括:

  • 暴露装载机
  • 进口装载机
  • expoert装载机
  • 输出:库
  • 黑魔法 :(

我试过的代码示例:

我想得到:window.MyMod

// mymod.js
export class MyMod {
    constructor(aaa) {
        this.aaa = aaa;
    }
    toString() {
        return this.aaa;
    }
}
Run Code Online (Sandbox Code Playgroud)

// webpack.config
var entries = [
    './src/mymod.js'
];
module.exports = {
    ...,
    module: {
      loaders: [
            {
                test: require.resolve('./src/mymod.js'),
                loader: 'expose?MyMod'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
    ]
}
Run Code Online (Sandbox Code Playgroud)

这只会让我在包含MyMod作为构造函数的窗口上找到一个MyMod对象.

任何帮助将不胜感激.

javascript module global-variables ecmascript-6 webpack

9
推荐指数
2
解决办法
9163
查看次数