Question

我不明白为什么这么复杂我希望我的项目有两个独立的工作空间，其中一个是将要分发的库，另一个将用于测试......这就是我的方式文件结构

project  
--engine
---math
----vec2.js
---dist  
----library.js  
---main.js  
--sandbox  
---main.js

我想用webpack和es6模块构建“引擎”项目，所以我得到一个可以在“沙盒”中使用的“库”文件。

“引擎”主文件看起来像这样

import vec2 from './math/vec2';
export default class Library {
   constructor() {
      this.vec2 = vec2;
   }
}

然后沙盒主文件看起来像这样

import lib from '../engine/dist/library';
const game = new lib();

问题是，当我使用webpack构建“library.js”文件并将其导入“sandbox”主文件时，我无法调用其中的任何类。我收到这个错误。

Uncaught TypeError: o.default is not a constructor
    at Object.<anonymous> (library.js:1)
    at e (library.js:1)
    at library.js:1
    at library.js:1

我的webpack.config.js文件看起来像这样

    var webpack = require('webpack');
module.exports = {
    context: __dirname,
    entry: __dirname+"/main.js",
    output: {
        path: __dirname+"/dist",
        filename: "library.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
};

我必须缺少一些配置webpack需求或一些能够使其工作的插件。我只是想使用es6模块使用webpack构建库，因此它可以在另一个项目中使用，但我不知道如何配置它。我正在使用babel将es6发送到es5

Answer 1

您需要配置output.libraryTarget。在这种情况下，目标emerge是合适的。所以你的commonjs-module将是：

output

文档中描述了不同的目标。您可能还想阅读Guides - Authoring Libraries。

使用webpack创建javascript库

1 个答案: