可能每天还在同见仁见智之JavaScript版本及工具打交道 例如。浏览器对ES6开发持度已经越来越高了。

目录

  • 引言

  • ECMAScript

  • ES5-/-ES6-/-ES7

  • babel

    • babel-cli

    • babel-node

    • 其他

  • 小结

  • 参考

乘机时间的延,浏览器对ES6支出持度已经越来越大了,超过90%底 ES6
语法特性都落实了。虽然小浏览器对ES6的支持程度早已大高了(Chrome59
97%,Safari10 99%),但是洋洋人数采用的IE对ES6的支撑任然很无出彩(IE11
11%),所以当实际上工程运用中,我们尚索要拿ES6转账成ES5。各大浏览器的最新版本,对
ES6 的支持好查阅kangax.github.io/es5-compat-table/es6/。

引言

当一个JavaScript使用者和开发者
想必每天还以跟见仁见智之JavaScript版本和工具打交道 例如:

ES5 / ES6 / ES7 / babel ...

这就是说这些到底是呀意思啊? 本文打算因此最为简便易行的描述理清这些涉嫌

环境支持

Node 是 JavaScript 的服务器运行条件(runtime)。它对 ES6
的支持度更胜,除了那些默认打开的意义,还有局部语法功能曾落实了,但是默认没有打开。使用下的下令,可以查看
Node 已经落实之 ES6 特性。

node --v8-options | grep harmony

方命令的出口结果,会为本的不同而有所不同。

ECMAScript

ECMAScript是由ECMA国际(前身为
欧洲计算机制造商协会 European Computer Manufacturers
Association)制定的规则脚本语言

JavaScript是遵循ECMAScript标准落实之编程语言

不怕: ECMAScript是正经 JavaScript是实现 但是通常简单种植可以互相换

转码

经一定的转码器,如Babel,或在线的转换器,将ES6转移成ES5重新拓展布置。

Babel 是一个大使用的 ES6 转码器,可以用 ES6 代码转为 ES5
代码,从而在存活条件实行。这象征,你可以用 ES6
的不二法门编写程序,又不要顾虑现有条件是否支持。相对于事先的Babel5,Babel6不再是一个整治的老的package,而是拆分了森只小之package可供选择安装,可以因项目展开打定义。下面介绍Babel的支付环境的布局。

ES5 / ES6 / ES7

  • ES5 / ES6 是依ECMAScript版本的缩写

ECMAScript标准发布之版本与年的对应关系如下

年份 版本 缩写
2011 ECMAScript 5.1 ES5
2015 ECMAScript 6.0 ES6/ES2015
  • ES7 是指ECMAScript的风行版本

出于专业还不曾正经确定为此分也4只stage

功能 stage 0 > stage 1 > stage 2 > stage 3

1. 命令行使用(手动编译)

  1. 安babel-cli,支持命令下用babel

npm install --save-dev babel-cli

好之后,我们尚免克编译ES6文本,因为 babel 不再包含其他 transform
功能,babel6里把它们作为插件(plugin)分割出,需要我们友好定义。

  1. 安装babel-preset-env
    比方想编译ES6文书,我们不能不设置相关的插件,babel-preset-env打包了独具用于转换ES6的插件,安装babel-preset-env:

npm install --save-dev babel-preset-env

babel还有babel-preset-es2015,babel-preset-es2016顶插件,每一样年的preset仅编译那无异年的许可的条条框框,而babel-preset-env则含有es2015,es2016,es2017以及latest等。

  1. 配置
    设置完babel-preset-env之后,还待平等步,在package.json或.babelrc文件启用babel-preset-env:

"babel": { 
   "presets": [ 
       "env" 
   ] 
}
  1. 编译
    完了上述安装后,就好编译文件了:

# 转码结果输出到标准输出
babel example.js
# 转码结果写入一个文件 --out-file 或 -o 参数指定输出文件
babel example.js --out-file compiled.js
# 转码整个目录 --out-dir 或 -d 参数指定输出目录
babel src --out-dir lib
#忽略spec和test文件
babel src --out-dir lib --ignore spec.js,test.js
# -s 参数生成source map文件
babel src -d lib -s

重复多选

babel

babel[‘beibəl] 即
巴别塔

起名字不难看出babel的用意: 缓解JavaScript不同版本兼容性问题

ES6 / ES7正经为很多有效之特色

比如说: async / await就带有在stage 3

唯独由于

  • 兼容性 尤其是浏览器的兼容性 + 国内用户各种盗版系统不升级
    所以不得不用ES6 / ES7落实之JavaScript代码转码成ES5实行

浏览器对ES6的兼容性 可以参见ECMAScript 6 compatibility
table

  • 扩展性
    JavaScript的超集TypeScript以及JSX
    也亟需转码成JavaScript才能够行

2. Webstorm编译(IDE)

  1. 开启ES6报法支持
    Webstorm已经支持ES6报告法了,但是默认情况下没拉开,需要我们手动开启,打开Preferences->Languages
    & Frameworks->JavaScript,在挑中设置为ES6。
![](https://upload-images.jianshu.io/upload_images/2634562-9f64842bab2a4361.png)

image.png
  1. 安装babel-cli和babel-preset-env

npm install --save-dev babel-preset-env babel-cli
  1. 配置babel File Watcher
    File
    Watcher是一个Webstorm内置工具,可以于文书发生变化时自动执行相关命令,对于babel,已经起预存的配置,我们激活配置即可使:
    Preferences->Tools->File watchers
    点击’+’按钮,选择babel,在File
    watcher配置中,指定babel-cli在node_modules中的路:

    澳门黄冠娱乐备用网址 1

    image.png

在Webstorm
2017.1中,编译过的文件存放在dist文件夹中,可以自己设置输出文件路径,输入文件路径,编码的文件类型等参数,更多配置请参考[Webstorm官网](https://link.jianshu.com?t=https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/)。当然,你也可以在package.json或者.babelrc配置文件中指定,添加适合你工程的配置。

babel-cli

Babel提供了babel-cli工具 用于令行转码 安装命令如下

npm i -g babel-cli
babel -V

关于npm的安装和动用可以参照这里

  • 率先 创建一个下ES6″箭头函数”语法的script.js文件

var a = [1, 2];
console.log('before: ' + a);

a = a.map(i => i + 1);
console.log('after: ' + a);

至于”箭头函数”的复多介绍
可以参见这里

  • 随着 在script.js文件之同级目录添加babel的布局文件.babelrc

{
  "presets": [
    "es2015"
  ],
}
  • 还要 我们要添加babel presets “es2015″的乘 安装命令如下

npm i --save-dev babel-preset-es2015

装成功后 在同级目录下会生成package.json文件和node_modules文件夹

  • 说到底 我们便可动用babel来将ES6文书转码成ES5文书了 命令如下

babel script.js -o script-compiled.js

转码成功后 可以看来变化的script-compiled.js文件内容如下

'use strict';

var a = [1, 2];
console.log('before: ' + a);

a = a.map(function (i) {
  return i + 1;
});
console.log('after: ' + a);

除在本机安装babel-cli工具
还足以应用babel在线转码工具

3.VS Code配置

  1. 安装babel-cli和babel-preset-env

npm install --save-dev babel-cli babel-preset-env
  1. 布置package.json,设置生成souremaps

{
  "scripts": {
    "build": "babel src -d dist --source-maps"
  }
}
  1. 以.vscode目录下的tasks.json文件被描写副如下配置,如果无这文件,就创办一个

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            //此处第二个参数"build"要与上一步中的scripts中的编译脚本的名字一样
            "args": [ "run", "build" ],
            "isBuildCommand": true
        }
    ]
}
  1. 打开.vscode目录下之launch.json文件,在
    configurations中添加如下配置,通过动preLaunchTask
    在起步前进行编译,如果无launch.json文件,打开调试,在开行程序一样牢,下拉,添加配置即可

    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceRoot}/src/index.js",//需要编译的文件
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            //此处的"build"要和上一步的tasks中的taskName一样
            "preLaunchTask": "build",
            "runtimeExecutable": null,
            "runtimeArgs": ["--nolazy"],
            "env": {
                "NODE_ENV": "development"
            },
            "sourceMaps": true,
               "outFiles": [
                "${workspaceRoot}/dist"//输出文件的目录
            ]
        }
    ]

澳门黄冠娱乐备用网址 2

image.png

  1. 启航调试要本F5,就可以以出口目录下看编译好的文件

babel-node

当设置babel-cli的上 除了安上述babel命令 还安装了babel-node命令

babel-node可以直接运行ES6文本 例如: script.js文件

babel-node script.js

打印如下

before: 1,2
after: 2,3

babel-node当然为堪运行转码后底公文 例如: script-compiled.js

babel-node script-compiled.js

打印如下

before: 1,2
after: 2,3

只要读者有node.js开发经历
那么好直接下babel-node代替node来启动node.js应用

4. 浏览器环境

Babel 为可以用于浏览器环境。但是,从 Babel 6.0
开始,不再直接提供浏览器版本,而是一旦用构建工具构建出。如果你莫或无思量采取构建工具,可以采取babel-standalone模块提供的浏览器版本,将那个插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js">
</script>
<script type="text/babel">
// Your ES6 code
</script>

在意,网页实时将 ES6 代码转为
ES5,对性会有影响。生产环境需要加载已经转码完成的台本。
再度多转换方法请参考 《ECMAScript 6
入门》

其他

除却上述babel babel-node工具外 还有babel-register babel-core
babel-polyfill等工具

此间就是不一一详细介绍了
感兴趣的读者可参考这里

5. 关于Babel

  1. babel-node
    babel-cli工具从带一个babel-node命令,提供一个支撑ES6的REPL(Read-Eval-Print-Loop)环境。它支持Node的REPL环境之有着机能,而且好直接运行ES6代码。它不用单独安装,而是随babel-cli一起安装。然后,执行babel-node就进来REPL环境。

#进入REAL环境
babel-node
#babel-node命令可以直接运行ES6脚本(.js可以省略)
babel-node test.js
#babel-node也可以安装在项目中
npm install --save-dev babel-cli
  1. babel-polyfill
    当即将效仿一个整机的ES2015 +环境,旨在用于应用程序而无是仓库/工具。Babel
    默认只转换新的 JavaScript 句法(syntax),而不转移新的
    API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象及之道(比如Object.assign)都无见面转码。
    比喻来说,ES6 在Array对象上增产了Array.from方法。Babel
    就不见面转码这个主意。如果想给这措施运行,必须下babel-polyfill,为当下条件提供一个垫。

#因为它是一个填充工具(在源码之前运行),所以它是一个dependency,而不是devDeoendencynpm 
install --save babel-polyfill

然后以先后的输入包含polyfill,确保在另引用声明前调用

#node
require("babel-polyfill");
#es6
import("babel-polyfill");

当以webpack时,在webpack.config.js文件的入口数组被上加babel-polyfill:

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

小结

本文作为鄙人Javacript学习和经验总结的开篇 �希望经过本文的介绍
读者更撞ES2015 / ES6 / stage3 / babel工具集时不再盲目

参考文献

  1. 《ECMAScript 6
    入门》
  2. Webstorm,Babel
    官方文档
  3. debugging in Visual Studio Code with
    babel-node

参考

  • ECMAScript
    6简介

  • ECMAScript
    proposals

  • ECMAScript 6 compatibility
    table

  • Babel
    入门教程

再次多篇,
请支持自己的私博客

说明

所有内容还已以macOS Sierra
10.12.5,cnpm@4.5.0,npm@3.10.10,node@6.10.2,babel-cli@6.24.1,babel-preset-env@1.5.2,Webstorm
2017.1,VS Code@1.13.1环境下促成并说明。
PS:初次撰写,如发欠缺以及谬误澳门黄冠娱乐备用网址的处,请多多指教。

相关文章