ECMAScript 6 学习笔记(1)

参考文档:http://es6.ruanyifeng.com/#docs/intro
https://www.w3cschool.cn/ecmascript/

ECMAScript是一种定义脚本语言的规范,Javascript正是基于这种规范的一种实现。JavaScript是一种弱类型定义、动态编程脚本语言,通过解释器运行而非编译机器码运行。

ECMAScript6调试环境配置,最新版本的nodejs对ES6能够大部分支持,并非全部。可以用ES-Checker对安装的nodejs检测支持es6的程度:
(1)安装:npm install -g es-checker
(2)windows下cmd运行es-checker,如下:

Passes 38 feature Detections
Your runtime supports 90% of ECMAScript 6

Babel 是一个广泛使用的 ES6 转码器,对ES6代码转码为ES5。配置方法如下:
(1)在调试项目的根目录下,用npm(最新的nodejs自带npm模块管理工具)安装对应的规则模块(根目录下会生成一个node_modules文件夹),如下:

//最新的转码规则
npm install --save-dev babel-preset-latest

//react转码规则
npm install --save-dev babel-preset-react

//选2阶段的语法提案
$ npm install --save-dev babel-preset-stage-2

babel 官方推荐将 Babel 安装在本地,因为 Babel 的不同版本以及不同转码规则会起到不同的效果,全局安装会带来不必要的麻烦,所以没有加 -g 参数。

(2)在调试项目的根目录下新建.babelrc文件,内容配置如下:

{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}

(3)在项目调试根目录下建立src(源文件),lib(转码后生成文件)。Babel 提供babel-cli工具,用于命令行转码。

npm install --global babel-cli

命令格式如格式如下:

babel example.js
//转码结果写入compiled.js --out-file或-o
babel example.js --out-file compiled.js

babel example.js -o compiled.js

//整个目录转码,src目录下指定输出到lib下,--out-dir 或 -d参数
babel src --out-dir lib
babel src -d lib

//-s 生成source map文件
babel src -d lib -s


babel因为不是全局安装,所以在当前目录下使用命令需要再二次配置,两个方案:
a、在项目的根目录下自行添加一个 babel.cmd 文件,并写入以下内容,就能使用项目里的 babel 命令

node .\node_modules\babel-cli\bin\babel.js %*

同样使用 babel-node 命令,在项目的根目录下自行添加一个 babel-node.cmd 文件,并写入以下内容:

node .\node_modules\babel-cli\bin\babel-node.js %*

b、babel-cli 模块已经安装就绪,然后改写当前目录下的:package.json(如果没有该文件,用npm init生成)

{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}

转码的时候直接运行以下命令:

npm run build

该命令将目录src中源文件转码到指定目录lib。

猜你喜欢

转载自blog.51cto.com/13238147/2118057
今日推荐