ES6-开发环境搭建（1）

android_c 发布于2019-08-23 15:21 / 2821人阅读

摘要：全局安装本地安装转码规则安装完成后，我们可以看一下我们的文件，已经多了选项。直接在线编译提供一个在线编译器，可以在线将代码转为代码。

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

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

1、使用Babel把ES6编译成ES5

1.1 建立工程目录

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

1.2 初始化项目

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

npm init -y

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

1.3 全局安装Babel-cli

npm install -g babel-cli

1.4 本地安装转码规则

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

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

1.5 新建.babelrc

在根目录下新建.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;

项目文件最终结构

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 基本文件目录

首先全局安装webpack（这里使用 webpack@3.12.0 版本）

npm install -g webpack@3

新建一个文件夹，命名为 webpack_demo；

命令行切换到 webpack_demo的文件目录下，执行下面的命令，生成默认 package.json 配置文件

npm init -y

利用 npm 安装 webpack

npm i --save-dev webpack@3

新建 webpack.config.js（用于配置 webpack 的运行方式），最简单的配置如下：

module.exports= {

/* webpack 入口起点 */
entry:"./index.js",
/* webpack 输出 */
output:{
    // 输出 文件名
    filename:"./test.js"
},

}

2.2 安装babel相关

安装 babel-core 包
npm i --save-dev babel-core

安装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 结合在一起

需要在两者之间建立一条纽带，而通过 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

通过使用 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"
                        ]
                    }
                },
            }
        ],
    },

最终的项目结构为：

在当前目录下执行 webpack 命令

webpack

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

3、Traceur转码器

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

3.1 直接在页面中使用：

写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搭建环境的顺序：

创建项目创建两个文件夹src和dist

使用npm init 初始化项目生成package.json（项目信息文件）

使用 npm install -g babel-cli 全局安装

使用 npm install –save-dev babel-preset-es2015 babel-cli本地安装

创建.babelrc文件（babel转换的配置文件）

在src下创建js，编写ES6语法

babel src/index.js -o dist/index.js转码生成ES5语法

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

将 JavaScript 源代码解析成抽象语法树（AST）；

将源代码的 AST 结果一系列转换生成目标代码的 AST；

将目标代码的 AST 转换成 JavaScript 代码。

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

云服务器 GPU云服务器开发环境搭建搭建开发环境安卓开发环境搭建 Centos搭建开发环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101923.html

搭建es6开发与非开发环境babel-browser

摘要：前言最近打算把应用到项目中，但是如何在开发环境浏览器端直接运行已经发布一段时间了，现在大部分是在环境运行，或者通过编译之后运行。主要实现用户能够在浏览器上直接运行语法。前言最近打算把es6应用到项目中，但是如何在开发环境（浏览器端）直接运行es6？es6已经发布一段时间了，现在大部分是在node.js环境运行，或者通过babel编译之后运行。babel-browser主要实现用户能...

selfimpr 2019-08-20 17:38 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
搭建一个es6的开发环境

摘要：前提是你已经安装了手动创建一个工作目录以下是的内容在目录下创建一个这里写我们的代码接下来我们需要把语法编译成我们浏览器所识别的语法文件，那就用到我们的神奇在安装之前我们要先初始化一下项目全局安装输入以下命令此时文件中就有的依赖了你以 1.前提是你已经安装了node,npm2.手动创建一个工作目录 dist,src,index.html 以下是index.html的内容 ...

jcc 2019-08-22 13:50 评论0 收藏0
如何搭建es6开发环境

摘要：安装此过程没有难点，略过下载完成后可以通过和来查看是否安装成功以及版本后安装新建一个目录项目名称进入该项目，然后一路回车即可。 node.js安装此过程没有难点，略过下载完成后可以通过node -v和npm -v来查看是否安装成功以及版本后 webpack 安装新建一个目录(项目名称), 进入该项目，npm init, 然后一路回车即可。(会生成一个package.json...

OldPanda 2019-08-23 14:26 评论0 收藏0
Omi原理-环境搭建

摘要：相关依赖有和其余都是单元测试相关依赖注意，这里使用了。因为使用框架支持和使用是为了在单元测试里面使用的和等语法。脚本其中生成目录的文件执行单元测试编译的编译的在中，会根据去设置不同的入口文件。环境搭建 Omi框架使用 Webpack + ES6 的方式去开发；使用karma+jasmine来作为Omi的测试工具。 Karma介绍 Karma是一个基于Node.js的JavaScrip...

lncwwn 2019-08-20 14:12 评论0 收藏0