使用webpack将多个ES6类捆绑到一个文件中,以便在脚本标记中导入
Alb*_*ddy 12 javascript node.js npm webpack webpack-2
现在已经三天了,我正在尝试理解webpack来执行一项简单的任务(当然,在三天的时间里我可以手工完成)但是为了学习webpack并且能够扩展. ..
我带着一个绝望的问题跟你来,这可能与这个人想要实现的目标有什么关系我如何使用webpack连接和缩小文件,但他的解决方案对我不起作用.
问题很简单我有三个类:
./src/class1.js
export default class One {
constructor() {
this.isHorrible = true
}
whatIsHorrible() {
return (this)
}
}
./src/class2.js
class Two {
iMSoFat() {
this.fatness = 88
return (this.fatness)
}
}
export { Two }
./src/class3.js
class Three {
constructor() {
this.isHorrible = true
}
whatIsHorrible() {
return (this)
}
}
export { Three }
我想做的是在index.html页面中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test ton cul</title>
<script src="./lib/ebjs.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
console.log(One, Two, Three);
</script>
</body>
</html>
我也很满意
new window.One()
//.. or EVEN
new window.ebjs.One()
所以我尝试了几个配置,我将免除你经历的令人生厌的细节和挫折......缺乏睡眠和食物.
我试了很长时间才使数组入口点工作......但后来我在文档中的某处读了"如果你传递一个数组:所有模块都是在启动时加载的.最后一个是导出的." 这解释了很多......我总是以某种方式只得到一个类......无论那意味着什么......为什么它会像那样？这对我来说完全没有意义......反正......但即使这样,我得到的类也不是形式library.class()或window.class()或class().
所以过了一会儿,我可以在index.js中加载所有东西并导出它!
我首先尝试了ES6导入的样式,因为为什么不呢.但是import {One} from './src/class1'以某种方式不起作用,只是在未定义的导出上产生一堆..就像window.library.One = undefined.
所以我在解决这个index.js之前再次摆弄了一会儿:
index.js
const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')
export { class1, class2, class3 }
我的webpack配置发生了很大的变化,但现在我正在使用它:
webpackrc.config.babel.js
const libraryName = 'ebjs'
const outputFile = `${libraryName}.js`
export default {
entry: './index.js',
target: 'web',
// entry: './index.js',
devtool: 'source-map',
output: {
path: `${__dirname}/lib`,
filename: outputFile,
library: libraryName,
libraryTarget: 'umd',
umdNamedDefine: true,
},
module: {
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/,
},
],
},
}
许多细节和试验/错误已经痛苦地进行了......我确实写了我的实验日志.也许我会在几个小时内扣动扳机之前与世界分享它.
无论如何,它有点工作,但不是预期的,绝对不是生产质量.要访问该类,我必须使用"new libraryName.One.One()".如果我想将其捆绑为npm,这对用户来说没有任何意义.它仍然没有像预期的那样工作.
以下是页面上对象的屏幕截图:
我希望有人能帮助我.我的生活真的可能取决于它:)
谢谢 !
编辑和结束
所以cbll的答案确实有效...我可以使用es6 import语句,并且类已正确导出到bundle中.在我可以使用的HTML中
libraryName.class()
如果有人和我一样处于同样的困境,我创建了一个小型回购:
https://github.com/albertbuchard/example-webpack-es6-class-bundle
再次感谢cbll和Michael Jungo!
在每个classN.js类中,通过export default One文件末尾和开头导出每个类(正如您在"一个"示例中所做的那样,而不是其他类).在你的index.js,导入每个:import One from './classN.js',当然假设他们在同一个文件夹(如果没有,添加适当的路径).然后它将包含在您的主index.js中,并与Webpack捆绑在一起.
在你的情况下,这意味着你的index.js将开始这样的事情:
import One from ('./src/class1.js')
import Two from ('./src/class2.js')
import Three from ('./src/class3.js')
这假设您One在示例中导出了所有类,因此:
export default class One {
// code goes here
export default class Two {
// code goes here
export default class Three {
// code goes here
| 归档时间： |
|
| 查看次数： |
7515 次 |
| 最近记录： |