Question

我有不同的JSfiles，我必须使用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/

第二和第三个链接是学习如何创建单个JS包的可行形式吗？还有其他好的和简单的选择吗？

Answer 1

我不确定你是否可以使用babel作为捆绑包。但是，既然你是新手，我建议你查看webpack。如果这是一个选项，请阅读

您的文件夹结构最初可能类似于以下内容

[11:41:11]  lint finished in 13.88 s
PS C:\Users\user\myApp> cordova -v
8.0.0
PS C:\Users\user\myApp> java -version
java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)
PS C:\Users\user\myApp> javac -version
javac 1.8.0_101
PS C:\Users\user\myApp>

的index.html

project folder
  |
  |-src
  |  |
  |  |- index.js
  |  |- moduleOne.js
  |  |- moduleTwo.js
  |
  |- index.html
  |- webpack.config.js

webpack.config.js

<!doctype html>
<html>
  <head>
    <title>Sample</title>
  </head>
  <body>
    content
    <script src="dist/bundle.js"></script>
  </body>
</html>

moduleOne.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

moduleTwo.js

export default class moduleOne {

    constructor() {
        console.log('moduleOne constructor');
    }

    someFunc(text){
        console.log(text);
    }
}

在命令行窗口中，导航到项目文件夹并键入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方法。 Webpack将所有这些捆绑到someFunc()。这是一个快速设置，但希望你能得到这个想法

来源：webpack

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

1 个答案: