使用 Babel 创建单个 JavaScript 包的最佳方式

我有不同的JS文件，我必须使用Babel来创建单个JS包。

他们向我推荐了这个第一个链接，但我不明白如何：https://babeljs.io/docs/usage/cli/

在互联网上浏览时，我发现了第二个链接：http://ccoenraets.github.io/es6-tutorial-data/babel-webpack/这使我有义务首先使用第三个链接：http://ccoenraets.github.io/es6-tutorial/setup-babel/

第 2 和第 3 个链接是学习如何创建单个 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'
}
};

模块一.js

export default class moduleOne {
constructor() {
console.log('moduleOne constructor');
}
someFunc(text){
console.log(text);
}
}

模块二.js

export default class moduleTwo {
constructor() {
console.log('moduleTwo constructor');
}
someFunc(text){
console.log(text);
}
}

在命令行窗口中，导航到"项目文件夹"并键入npm install webpack --save-dev

然后运行webpack以捆绑文件。这将创建一个包含bundle.js文件的dist文件夹。

现在，如果您在浏览器上打开index.html，您应该会看到以下控制台输出。

moduleOne constructor
moduleTwo constructor
moduleOne.someFunc
moduleTwo.someFunc

简而言之，index.js导入moduleOne.js和moduleTwo.js，实例化它们并调用someFunc()方法。Webpack将所有这些捆绑到dist/bundle.js。这是一个快速设置，但希望你能明白

来源：网络包

相关内容