用webpack創建javascript庫

Question

我不明白爲什麼這會如此複雜我希望我的項目有2個獨立的工作空間，其中一個是分佈式庫，另一個將用於測試......這個就是我有一個文件結構

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(); 

問題是，當我建「庫。 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

Answer 1

您需要配置output.libraryTarget。在這種情況下，目標commonjs-module是適當的。所以你的output將是：

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

不同的目標在文檔中描述。你也可能想閱讀Guides - Authoring Libraries。