ES6的开发环境搭建

落日映苍穹つ 2022-03-07 01:44 362阅读 0赞

古语有云：“君子生非异也，善假于物；工欲善其事，必先利其器。”

由于有些低版本的浏览器还是不支持ES6语法，学习ES6，首先要学会搭建一个基本的ES6开发环境，利用工具，把ES6的语法转变成ES5的语法。

1、使用Babel把ES6编译成ES5

1.1 建立工程目录

先建立一个项目的工程目录，并在目录下边建立两个文件夹：dist 和 src

![图片描述][3297711562-5c6d45d0787fa_articlex]

1.2 初始化项目

在安装Babel之前，需使用npm init先初始化我们的项目。通过cmd打开命令行工具，进入项目目录，输入下边的命令：

npm init -y

命令执行完成后，会在项目根目录下生产package.json文件。

![图片描述][1999694642-5c6d45e4acf99_articlex]

1.3 全局安装Babel-cli

npm install -g babel-cli

1.4 本地安装转码规则

npm install --save-dev babel-preset-es2015 babel-cli

安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。

![图片描述][1226968332-5c6d45f79ca13_articlex]

1.5 新建.babelrc

![图片描述][3569945340-5c6d46051abdf_articlex]

在根目录下新建.babelrc文件，.babelrc是Babel的配置文件。

该文件是用来设置转码规则和插件的，基本格式如下：

{    
        "presets":["es2015"],    
        "plugins":[]
    }

1.6 babel基本用法

# 转码结果输出到标准输出
    $ babel example.js
    
    # 转码结果写入一个文件 (--out-file 或 -o 参数指定输出文件)
    $ babel example.js --out-file compiled.js
    或者
    $ babel example.js -o compiled.js
    
    # 整个目录转码 (--out-dir 或 -d 参数指定输出目录)
    $ babel src --out-dir lib
    或者
    $ babel src -d lib
    
    # -s 参数生成source map文件
    $ babel src -d lib -s

在src目录下，新建index.js文件，使用ES6中的 let声明和字符串模板

let name = 'Bread and Dream';
    let greeting = `hello ${name}`;

在命令行输入

babel src/index.js -o dist/index.js

这时dist目录会生成 index.js 文件，输出结果为：

'use strict';
    
    var name = 'Bread and Dream';
    var greeting = 'hello ' + name;

项目文件最终结构

![图片描述][3842157687-5c6d461f26b5c_articlex]

1.7 简化转化命令：

使用babel命令行，一大长串，很容易忘记，所以，我们可以进行改造，打开package.json文件，添加以下代码

{
      "scripts": {
        "build": "babel src/index.js -o dist/index.js"
      },
    }

修改好后，以后我们就可以在命令行输入 npm run build 进行转换了。

（注：build是自定义的，为了语义化命名为build，当然也可以命名成其他的，例如 compile）

2、webpack + Babel 构建 ES6 开发平台

2.1 搭建 webpack 基本文件目录

1.  首先全局安装webpack（这里使用 webpack@3.12.0 版本）
    
    npm install -g webpack@3
2.  新建一个文件夹，命名为 webpack\_demo；
3.  命令行切换到 webpack\_demo的文件目录下，执行下面的命令， 生成默认 package.json 配置文件
    
    npm init -y
4.  利用 npm 安装 webpack
    
    npm i --save-dev webpack@3
5.  新建 webpack.config.js（用于配置 webpack 的运行方式），最简单的配置如下：
    
    module.exports= \{
    
        /* webpack 入口起点 */
        entry:'./index.js',
        /* webpack 输出 */
        output:{
            // 输出 文件名
            filename:'./test.js'
        },
    
    \}

2.2 安装babel相关

1.  安装 babel-core 包  
    npm i --save-dev babel-core
2.  安装babel-preset-env 和 babel-preset-stage-0 包  
    npm i --save-dev babel-preset-env babel-preset-stage-0  
    babel-preset-env 是一个主流的 Babel 插件数组；Stage-X 是实验阶段的 Presets

2.3 将 webpack 和 Babel 结合在一起

1.  需要在两者之间建立一条纽带，而通过 webpack 的 loaders 就可以生成这条纽带，因此要修改 webpack.config.js 配置文件：
    
    / *webpack loaders 配置* /  
    module:\{
    
        rules:[
               {
                   test:/\.js$/,
                   use:{
                       loader:'babel-loader',
                   },
               }
           ],
    
    \},

就是针对以 .js 结尾的文件使用 babel-loader。由于项目中还不存在 babel-loader，所以要先安装该模块：

npm i --save-dev babel-loader

1.  通过使用 loader 语法配置 Babel 的 presets

使用 webpack 提供的方法，具体在 webpack.config.js 的 module.rules.use.options 中配置

/* webpack loaders 配置 */
        module:{
            rules:[
                {
                    test:/\.js$/,
                    use:{
                        loader:'babel-loader',
                        options:{
                            presets:[
                                'babel-preset-env',
                                'babel-preset-stage-0'
                            ]
                        }
                    },
                }
            ],
        },

最终的项目结构为：

![图片描述][3550356741-5c6d4669717bd_articlex]

在当前目录下执行 webpack 命令

webpack

输入文件 index.js 中的ES6代码已经被转换成输出文件 test.js 中的 ES5 代码了：

![图片描述][66631262-5c6d4691d2e87_articlex]

3、Traceur转码器

Google公司的Traceur转码器，也可以将ES6代码转为ES5代码。

3.1 直接在页面中使用：

<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>
    
    <script>
        traceur.options.experimental = true;
    </script>

写ES6代码，用：

注意：script标签的type属性的值是module，而不是text/javascript。这是Traceur编译器识别ES6代码的标识。

3.2 Traceur的命令行转换方法：

首先需要用npm安装。

$ npm install -g traceur

直接运行ES6代码，以index.js为例

$ traceur index.js

将ES6输出为ES5脚本

$ traceur --script index.js --out es5.js

为了防止有些特性编译不成功，最好加上–experimental选项。

$ traceur --script index.js --out es5.js --experimental

4、直接在线编译

Babel提供一个REPL在线编译器，可以在线将ES6代码转为ES5代码。

转换后的代码，可以直接作为ES5代码插入网页运行。

5、总结

使用babel搭建环境的顺序：

1.  创建项目创建两个文件夹src和dist
2.  使用npm init 初始化项目生成package.json（项目信息文件）
3.  使用 npm install -g babel-cli 全局安装
4.  使用 npm install –save-dev babel-preset-es2015 babel-cli本地安装
5.  创建.babelrc文件（babel转换的配置文件）
6.  在src下创建js，编写ES6语法
7.  babel src/index.js -o dist/index.js转码生成ES5语法

babel 本质就是一个 JavaScript 编译器，通过：

1.  将 JavaScript 源代码解析成抽象语法树（AST）；
2.  将源代码的 AST 结果一系列转换生成目标代码的 AST；
3.  将目标代码的 AST 转换成 JavaScript 代码。

当然，感兴趣的小伙伴可以深入研究下babel及其插件的源码，了解其运行机制，以便更全面的掌握ES6转ES5的相关原理、机制。

[3297711562-5c6d45d0787fa_articlex]: /images/20220307/9a1d9910313c455d96a7c09804503a60.png
[1999694642-5c6d45e4acf99_articlex]: /images/20220307/f1658eb0c5414e979646b527091473bd.png
[1226968332-5c6d45f79ca13_articlex]: /images/20220307/ab8e9a70d84b489eab2a9fb97f925a19.png
[3569945340-5c6d46051abdf_articlex]: /images/20220307/3cfc39786c024991a6a59b324f2fa7cd.png
[3842157687-5c6d461f26b5c_articlex]: /images/20220307/fa03a1f27eca425a9f9a4f7e9d0ab1e1.png
[3550356741-5c6d4669717bd_articlex]: /images/20220307/438feb2439f54529ad2578eb960a7702.png
[66631262-5c6d4691d2e87_articlex]: /images/20220307/333578a3c58046ed87df00efd67f4129.png