bol*_*kid 5 html javascript bundle file babeljs
我有不同的 JS 文件，我必须使用 Babel 来创建单个 JS 包。
他们向我推荐了第一个链接，但我不明白如何： https: //babeljs.io/docs/usage/cli/
在互联网上浏览时，我发现了第二个链接：http://ccoenraets.github.io/es6-tutorial-data/babel-webpack/，这迫使我首先使用第三个链接： http: //ccoenraets.github.io/ es6-教程/设置-babel/
第二个和第三个链接是学习如何创建单个 JS 包的可行形式吗？还有其他好的又简单的选择吗？
我不确定你是否可以使用 babel 作为捆绑器。不过，由于您是新手，我建议您研究一下 webpack。如果这是一个选项，请继续阅读
您的文件夹结构最初可能类似于下面的内容
project folder
|
|-src
| |
| |- index.js
| |- moduleOne.js
| |- moduleTwo.js
|
|- index.html
|- webpack.config.js
索引.html
<!doctype html>
<html>
<head>
<title>Sample</title>
</head>
<body>
content
<script src="dist/bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
moduleOne.js
export default class moduleOne {
constructor() {
console.log('moduleOne constructor');
}
someFunc(text){
console.log(text);
}
}
moduleTwo.js
export default class moduleTwo {
constructor() {
console.log('moduleTwo constructor');
}
someFunc(text){
console.log(text);
}
}
在命令行窗口中，导航到项目文件夹并输入npm install webpack --save-dev
然后运行webpack以捆绑文件。这将创建一个dist包含文件的文件夹bundle.js。
现在，如果您打开index.html浏览器，您应该会看到以下控制台输出。
moduleOne constructor
moduleTwo constructor
moduleOne.someFunc
moduleTwo.someFunc
简而言之，index.js导入moduleOne.js和moduleTwo.js，实例化它们并调用该someFunc()方法。Webpack 将所有这些都捆绑到dist/bundle.js. 这是一个快速设置，但希望您能明白
来源：webpack