用webpack创建javascript库
我不明白为什么这是如此复杂,我希望我的项目有两个独立的工作空间,其中一个是一个图书馆,将被分发,另一个将用于测试。。。这就是我的文件结构用webpack创建javascript库,javascript,webpack,ecmascript-6,Javascript,Webpack,Ecmascript 6,我不明白为什么这是如此复杂,我希望我的项目有两个独立的工作空间,其中一个是一个图书馆,将被分发,另一个将用于测试。。。这就是我的文件结构 project --engine ---math ----vec2.js ---dist ----library.js ---main.js --sandbox ---main.js 我想用webpack和es6模块构建“引擎”项目,这样我就可以得到一个“库”文件,可以在“沙盒”中使用 “引擎”主文件看起来像这样 import vec2
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();
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()
]
};
然后沙盒主文件看起来像这样
import vec2 from './math/vec2';
export default class Library {
constructor() {
this.vec2 = vec2;
}
}
import lib from '../engine/dist/library';
const game = new lib();
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构建“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
我一定是错过了一些配置网页需要或一些插件,将使这项工作。我只是想用使用es6模块的webpack来构建库,这样就可以在另一个项目中使用,但我不知道如何配置它。我正在使用babel将es6传输到es5,您需要进行配置。在这种情况下,目标commonjs模块
是合适的。因此,您的输出将是:
output: {
path: __dirname+"/dist",
filename: "library.js",
libraryTarget: "commonjs-module"
},
文档中描述了不同的目标。你可能也想看看。老兄,非常感谢你。。。我不知道该怎么做,谢谢你的链接。