使用 webpack 创建 javascript 库答案

【问题标题】：creating javascript library with webpack使用 webpack 创建 javascript 库
【发布时间】：2017-03-04 17:21:06
【问题描述】：

我不明白为什么这会如此复杂文件结构

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”文件并将其导入“沙盒”主文件时，我无法调用其中的任何类。我得到这个错误。

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

【问题讨论】：

标签： javascript webpack ecmascript-6

【解决方案1】：

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

output: {
    path: __dirname+"/dist",
    filename: "library.js",
    libraryTarget: "commonjs-module"
},

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

【讨论】：

非常感谢...