ES2015和babel入门
有很多人知道php是世界上最好的语言，但是JavaScript将终会统一宇宙。简单地说ES6是ECMAScript 6，现在ES6的标准越来越完善，可能是会火吧。Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码。
对于来说新手，练习ES6在线可以去babel官方地址：
http://babeljs.io/repl
安装babel
$ npm i -g babel-cli --registry=http://registry.npm.taobao.org
成功安装
> fsevents@1.0.15 install /usr/local/lib/node_modules/babel-cli/node_modules/chokidar/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
[fsevents] Success: "/usr/local/lib/node_modules/babel-cli/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v46-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
/usr/local/bin/babel-doctor -> /usr/local/lib/node_modules/babel-cli/bin/babel-doctor.js
/usr/local/bin/babel-node -> /usr/local/lib/node_modules/babel-cli/bin/babel-node.js
/usr/local/bin/babel -> /usr/local/lib/node_modules/babel-cli/bin/babel.js
/usr/local/bin/babel-external-helpers -> /usr/local/lib/node_modules/babel-cli/bin/babel-external-helpers.js
babel-cli@6.18.0 /usr/local/lib/node_modules/babel-cli
├── path-is-absolute@1.0.1
├── slash@1.0.0
├── fs-readdir-recursive@1.0.0
├── convert-source-map@1.3.0
├── commander@2.9.0 (graceful-readlink@1.0.1)
├── v8flags@2.0.11 (user-home@1.1.1)
├── source-map@0.5.6
├── glob@5.0.15 (inherits@2.0.3, once@1.4.0, inflight@1.0.6, minimatch@3.0.3)
├── output-file-sync@1.1.2 (object-assign@4.1.0, graceful-fs@4.1.11, mkdirp@0.5.1)
├── babel-core@6.18.2 (babel-template@6.16.0, babel-messages@6.8.0, babel-helpers@6.16.0, private@0.1.6, json5@0.5.0, babylon@6.14.1, minimatch@3.0.3, debug@2.3.3, babel-types@6.19.0, babel-code-frame@6.16.0, babel-traverse@6.19.0, babel-generator@6.19.0)
├── lodash@4.17.2
├── babel-register@6.18.0 (source-map-support@0.4.6, home-or-tmp@2.0.0, mkdirp@0.5.1, core-js@2.4.1)
├── babel-polyfill@6.16.0 (regenerator-runtime@0.9.6, core-js@2.4.1)
├── babel-runtime@6.18.0 (regenerator-runtime@0.9.6, core-js@2.4.1)
└── chokidar@1.6.1 (inherits@2.0.3, async-each@1.0.1, glob-parent@2.0.0, is-glob@2.0.1, is-binary-path@1.0.1, readdirp@2.1.0, anymatch@1.3.0, fsevents@1.0.15)
初始化项目
$ mkdir es2015_demo && cd es2015_demo && git init && npm init
执行npm init时需要按提示输入相应信息，可直接按回车跳过
Initialized empty Git repository in /Users/jinghua/es2015_demo/.git/
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (es2015_demo)
version: (1.0.0)
description: ceshi
entry point: (index.js)
test command:
git repository:
keywords:
author: zhou
license: (ISC)
About to write to /Users/jinghua/es2015_demo/package.json:
{
"name": "es2015_demo",
"version": "1.0.0",
"description": "ceshi",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "zhou",
"license": "ISC"
}
Is this ok? (yes) yes
现在我们新建一个test.js文件，试试测试是否能运行
$ touch test.js
vim编辑器写text.js
$ vim test.js
然后按键i就可以编辑，写完了按键esc,接下来输入:wq保存文件
function sleep(ms = 0) {
return new Promise((resolve, reject) => setTimeout(resolve, ms));
}
async function test() {
for (let i = 0; i < 10; i++) {
await sleep(500);
console.log(`i=${i}`);
}
}
test().then(() => console.log('done'));
执行命令运行
$ babel-node test.js
我的Mac终端器报错信息：
/Users/jinghua/es2015_demo/test.js:2
function sleep(ms = 0) {
^
SyntaxError: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:414:25)
at loader (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:467:10)
at /usr/local/lib/node_modules/babel-cli/lib/_babel-node.js:159:24
at Object.<anonymous> (/usr/local/lib/node_modules/babel-cli/lib/_babel-node.js:160:7)
at Module._compile (module.js:435:26)
这个报错信息我不知道怎么解决，先放在一边再解决吧。
上面的文章都不要了，我要重新开始安装babel的转换器
配置文件.babelrc
{
"presets": [],
"plugins": []
}
然后，将这些规则加入.babelrc
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# ES2015转码规则
localhost:bin jinghua$ cd /Users/jinghua/es6_demo
localhost:es6_demo jinghua$ npm install --save-dev babel-preset-es2015
npm WARN saveError ENOENT: no such file or directory, open '/Users/jinghua/es6_demo/package.json'
/Users/jinghua/es6_demo
└─┬ babel-preset-es2015@6.18.0
├─┬ babel-plugin-check-es2015-constants@6.8.0
│ └─┬ babel-runtime@6.18.0
│ ├── core-js@2.4.1
│ └── regenerator-runtime@0.9.6
├── babel-plugin-transform-es2015-arrow-functions@6.8.0
├── babel-plugin-transform-es2015-block-scoped-functions@6.8.0
├─┬ babel-plugin-transform-es2015-block-scoping@6.18.0
│ ├─┬ babel-template@6.16.0
│ │ └── babylon@6.14.1
│ ├─┬ babel-traverse@6.19.0
│ │ ├─┬ babel-code-frame@6.16.0
│ │ │ ├─┬ chalk@1.1.3
│ │ │ │ ├── ansi-styles@2.2.1
│ │ │ │ ├── escape-string-regexp@1.0.5
│ │ │ │ ├─┬ has-ansi@2.0.0
│ │ │ │ │ └── ansi-regex@2.0.0
│ │ │ │ ├── strip-ansi@3.0.1
│ │ │ │ └── supports-color@2.0.0
│ │ │ └── js-tokens@2.0.0
│ │ ├─┬ debug@2.3.3
│ │ │ └── ms@0.7.2
│ │ ├── globals@9.14.0
│ │ └─┬ invariant@2.2.2
│ │ └── loose-envify@1.3.0
│ ├─┬ babel-types@6.19.0
│ │ ├── esutils@2.0.2
│ │ └── to-fast-properties@1.0.2
│ └── lodash@4.17.2
├─┬ babel-plugin-transform-es2015-classes@6.18.0
│ ├── babel-helper-define-map@6.18.0
│ ├── babel-helper-function-name@6.18.0
│ ├── babel-helper-optimise-call-expression@6.18.0
│ ├── babel-helper-replace-supers@6.18.0
│ └── babel-messages@6.8.0
├── babel-plugin-transform-es2015-computed-properties@6.8.0
├── babel-plugin-transform-es2015-destructuring@6.19.0
├── babel-plugin-transform-es2015-duplicate-keys@6.8.0
├── babel-plugin-transform-es2015-for-of@6.18.0
├── babel-plugin-transform-es2015-function-name@6.9.0
├── babel-plugin-transform-es2015-literals@6.8.0
├── babel-plugin-transform-es2015-modules-amd@6.18.0
├─┬ babel-plugin-transform-es2015-modules-commonjs@6.18.0
│ └── babel-plugin-transform-strict-mode@6.18.0
├─┬ babel-plugin-transform-es2015-modules-systemjs@6.19.0
│ └── babel-helper-hoist-variables@6.18.0
├── babel-plugin-transform-es2015-modules-umd@6.18.0
├── babel-plugin-transform-es2015-object-super@6.8.0
├─┬ babel-plugin-transform-es2015-parameters@6.18.0
│ ├── babel-helper-call-delegate@6.18.0
│ └── babel-helper-get-function-arity@6.18.0
├── babel-plugin-transform-es2015-shorthand-properties@6.18.0
├── babel-plugin-transform-es2015-spread@6.8.0
├─┬ babel-plugin-transform-es2015-sticky-regex@6.8.0
│ └── babel-helper-regex@6.18.0
├── babel-plugin-transform-es2015-template-literals@6.8.0
├── babel-plugin-transform-es2015-typeof-symbol@6.18.0
├─┬ babel-plugin-transform-es2015-unicode-regex@6.11.0
│ └─┬ regexpu-core@2.0.0
│ ├── regenerate@1.3.2
│ ├── regjsgen@0.2.0
│ └─┬ regjsparser@0.1.5
│ └── jsesc@0.5.0
└─┬ babel-plugin-transform-regenerator@6.16.1
└── private@0.1.6
npm WARN enoent ENOENT: no such file or directory, open '/Users/jinghua/es6_demo/package.json'
npm WARN es6_demo No description
npm WARN es6_demo No repository field.
npm WARN es6_demo No README data
npm WARN es6_demo No license field.
# react转码规则
localhost:es6_demo jinghua$ npm install --save-dev babel-preset-react
npm WARN saveError ENOENT: no such file or directory, open '/Users/jinghua/es6_demo/package.json'
/Users/jinghua/es6_demo
└─┬ babel-preset-react@6.16.0
├── babel-plugin-syntax-flow@6.18.0
├── babel-plugin-syntax-jsx@6.18.0
├── babel-plugin-transform-flow-strip-types@6.18.0
├── babel-plugin-transform-react-display-name@6.8.0
├─┬ babel-plugin-transform-react-jsx@6.8.0
│ └── babel-helper-builder-react-jsx@6.18.0
├── babel-plugin-transform-react-jsx-self@6.11.0
└── babel-plugin-transform-react-jsx-source@6.9.0
npm WARN enoent ENOENT: no such file or directory, open '/Users/jinghua/es6_demo/package.json'
npm WARN es6_demo No description
npm WARN es6_demo No repository field.
npm WARN es6_demo No README data
npm WARN es6_demo No license field.
localhost:es6_demo jinghua$ npm install --save-dev babel-preset-stage-0
npm WARN saveError ENOENT: no such file or directory, open '/Users/jinghua/es6_demo/package.json'
/Users/jinghua/es6_demo
└─┬ babel-preset-stage-0@6.16.0
├─┬ babel-plugin-transform-do-expressions@6.8.0
│ └── babel-plugin-syntax-do-expressions@6.13.0
├─┬ babel-plugin-transform-function-bind@6.8.0
│ └── babel-plugin-syntax-function-bind@6.13.0
└─┬ babel-preset-stage-1@6.16.0
├─┬ babel-plugin-transform-class-constructor-call@6.18.0
│ └── babel-plugin-syntax-class-constructor-call@6.18.0
├─┬ babel-plugin-transform-export-extensions@6.8.0
│ └── babel-plugin-syntax-export-extensions@6.13.0
└─┬ babel-preset-stage-2@6.18.0
├── babel-plugin-syntax-dynamic-import@6.18.0
├─┬ babel-plugin-transform-class-properties@6.19.0
│ └── babel-plugin-syntax-class-properties@6.13.0
├─┬ babel-plugin-transform-decorators@6.13.0
│ ├─┬ babel-helper-explode-class@6.18.0
│ │ └── babel-helper-bindify-decorators@6.18.0
│ └── babel-plugin-syntax-decorators@6.13.0
└─┬ babel-preset-stage-3@6.17.0
├── babel-plugin-syntax-trailing-function-commas@6.13.0
├─┬ babel-plugin-transform-async-generator-functions@6.17.0
│ ├── babel-helper-remap-async-to-generator@6.18.0
│ └── babel-plugin-syntax-async-generators@6.13.0
├─┬ babel-plugin-transform-async-to-generator@6.16.0
│ └── babel-plugin-syntax-async-functions@6.13.0
├─┬ babel-plugin-transform-exponentiation-operator@6.8.0
│ ├─┬ babel-helper-builder-binary-assignment-operator-visitor@6.18.0
│ │ └── babel-helper-explode-assignable-expression@6.18.0
│ └── babel-plugin-syntax-exponentiation-operator@6.13.0
└─┬ babel-plugin-transform-object-rest-spread@6.19.0
└── babel-plugin-syntax-object-rest-spread@6.13.0
npm WARN enoent ENOENT: no such file or directory, open '/Users/jinghua/es6_demo/package.json'
npm WARN es6_demo No description
npm WARN es6_demo No repository field.
npm WARN es6_demo No README data
npm WARN es6_demo No license field.
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
安装babel
$ npm install --global babel-cli
安装以下信息
localhost:es6_demo jinghua$ npm install --global babel-cli
/Users/jinghua/.nvm/versions/node/v7.2.0/bin/babel-doctor -> /Users/jinghua/.nvm/versions/node/v7.2.0/lib/node_modules/babel-cli/bin/babel-doctor.js
/Users/jinghua/.nvm/versions/node/v7.2.0/bin/babel-node -> /Users/jinghua/.nvm/versions/node/v7.2.0/lib/node_modules/babel-cli/bin/babel-node.js
/Users/jinghua/.nvm/versions/node/v7.2.0/bin/babel -> /Users/jinghua/.nvm/versions/node/v7.2.0/lib/node_modules/babel-cli/bin/babel.js
/Users/jinghua/.nvm/versions/node/v7.2.0/bin/babel-external-helpers -> /Users/jinghua/.nvm/versions/node/v7.2.0/lib/node_modules/babel-cli/bin/babel-external-helpers.js
> fsevents@1.0.15 install /Users/jinghua/.nvm/versions/node/v7.2.0/lib/node_modules/babel-cli/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
[fsevents] Success: "/Users/jinghua/.nvm/versions/node/v7.2.0/lib/node_modules/babel-cli/node_modules/fsevents/lib/binding/Release/node-v51-darwin-x64/fse.node" is installed via remote
/Users/jinghua/.nvm/versions/node/v7.2.0/lib
└─┬ babel-cli@6.18.0
├─┬ babel-core@6.18.2
│ ├─┬ babel-code-frame@6.16.0
│ │ ├─┬ chalk@1.1.3
│ │ │ ├── ansi-styles@2.2.1
│ │ │ ├── escape-string-regexp@1.0.5
│ │ │ ├─┬ has-ansi@2.0.0
│ │ │ │ └── ansi-regex@2.0.0
│ │ │ ├── strip-ansi@3.0.1
│ │ │ └── supports-color@2.0.0
│ │ ├── esutils@2.0.2
│ │ └── js-tokens@2.0.0
│ ├─┬ babel-generator@6.19.0
│ │ ├─┬ detect-indent@4.0.0
│ │ │ └─┬ repeating@2.0.1
│ │ │ └─┬ is-finite@1.0.2
│ │ │ └── number-is-nan@1.0.1
│ │ └── jsesc@1.3.0
│ ├── babel-helpers@6.16.0
│ ├── babel-messages@6.8.0
│ ├── babel-template@6.16.0
│ ├─┬ babel-traverse@6.19.0
│ │ ├── globals@9.14.0
│ │ └─┬ invariant@2.2.2
│ │ └── loose-envify@1.3.0
│ ├─┬ babel-types@6.19.0
│ │ └── to-fast-properties@1.0.2
│ ├── babylon@6.14.1
│ ├─┬ debug@2.3.3
│ │ └── ms@0.7.2
│ ├── json5@0.5.0
│ ├─┬ minimatch@3.0.3
│ │ └─┬ brace-expansion@1.1.6
│ │ ├── balanced-match@0.4.2
│ │ └── concat-map@0.0.1
│ └── private@0.1.6
├─┬ babel-polyfill@6.16.0
│ ├── core-js@2.4.1
│ └── regenerator-runtime@0.9.6
├─┬ babel-register@6.18.0
│ ├─┬ home-or-tmp@2.0.0
│ │ ├── os-homedir@1.0.2
│ │ └── os-tmpdir@1.0.2
│ ├─┬ mkdirp@0.5.1
│ │ └── minimist@0.0.8
│ └── source-map-support@0.4.6
├── babel-runtime@6.18.0
├─┬ chokidar@1.6.1
│ ├─┬ anymatch@1.3.0
│ │ ├── arrify@1.0.1
│ │ └─┬ micromatch@2.3.11
│ │ ├─┬ arr-diff@2.0.0
│ │ │ └── arr-flatten@1.0.1
│ │ ├── array-unique@0.2.1
│ │ ├─┬ braces@1.8.5
│ │ │ ├─┬ expand-range@1.8.2
│ │ │ │ └─┬ fill-range@2.2.3
│ │ │ │ ├── is-number@2.1.0
│ │ │ │ ├── isobject@2.1.0
│ │ │ │ ├── randomatic@1.1.6
│ │ │ │ └── repeat-string@1.6.1
│ │ │ ├── preserve@0.2.0
│ │ │ └── repeat-element@1.1.2
│ │ ├─┬ expand-brackets@0.1.5
│ │ │ └── is-posix-bracket@0.1.1
│ │ ├── extglob@0.3.2
│ │ ├── filename-regex@2.0.0
│ │ ├─┬ kind-of@3.0.4
│ │ │ └── is-buffer@1.1.4
│ │ ├── normalize-path@2.0.1
│ │ ├─┬ object.omit@2.0.1
│ │ │ ├─┬ for-own@0.1.4
│ │ │ │ └── for-in@0.1.6
│ │ │ └── is-extendable@0.1.1
│ │ ├─┬ parse-glob@3.0.4
│ │ │ ├── glob-base@0.3.0
│ │ │ └── is-dotfile@1.0.2
│ │ └─┬ regex-cache@0.4.3
│ │ ├── is-equal-shallow@0.1.3
│ │ └── is-primitive@2.0.0
│ ├── async-each@1.0.1
│ ├─┬ fsevents@1.0.15
│ │ ├── nan@2.4.0
│ │ └─┬ node-pre-gyp@0.6.29
│ │ ├─┬ mkdirp@0.5.1
│ │ │ └── minimist@0.0.8
│ │ ├─┬ nopt@3.0.6
│ │ │ └── abbrev@1.0.9
│ │ ├─┬ npmlog@3.1.2
│ │ │ ├─┬ are-we-there-yet@1.1.2
│ │ │ │ └── delegates@1.0.0
│ │ │ ├── console-control-strings@1.1.0
│ │ │ ├─┬ gauge@2.6.0
│ │ │ │ ├── aproba@1.0.4
│ │ │ │ ├── has-color@0.1.7
│ │ │ │ ├── has-unicode@2.0.1
│ │ │ │ ├── object-assign@4.1.0
│ │ │ │ ├── signal-exit@3.0.0
│ │ │ │ ├─┬ string-width@1.0.1
│ │ │ │ │ ├─┬ code-point-at@1.0.0
│ │ │ │ │ │ └── number-is-nan@1.0.0
│ │ │ │ │ └── is-fullwidth-code-point@1.0.0
│ │ │ │ ├─┬ strip-ansi@3.0.1
│ │ │ │ │ └── ansi-regex@2.0.0
│ │ │ │ └── wide-align@1.1.0
│ │ │ └── set-blocking@2.0.0
│ │ ├─┬ rc@1.1.6
│ │ │ ├── deep-extend@0.4.1
│ │ │ ├── ini@1.3.4
│ │ │ ├── minimist@1.2.0
│ │ │ └── strip-json-comments@1.0.4
│ │ ├─┬ request@2.73.0
│ │ │ ├── aws-sign2@0.6.0
│ │ │ ├── aws4@1.4.1
│ │ │ ├─┬ bl@1.1.2
│ │ │ │ └── readable-stream@2.0.6
│ │ │ ├── caseless@0.11.0
│ │ │ ├─┬ combined-stream@1.0.5
│ │ │ │ └── delayed-stream@1.0.0
│ │ │ ├── extend@3.0.0
│ │ │ ├── forever-agent@0.6.1
│ │ │ ├─┬ form-data@1.0.0-rc4
│ │ │ │ └── async@1.5.2
│ │ │ ├─┬ har-validator@2.0.6
│ │ │ │ ├─┬ chalk@1.1.3
│ │ │ │ │ ├── ansi-styles@2.2.1
│ │ │ │ │ ├── escape-string-regexp@1.0.5
│ │ │ │ │ ├── has-ansi@2.0.0
│ │ │ │ │ └── supports-color@2.0.0
│ │ │ │ ├─┬ commander@2.9.0
│ │ │ │ │ └── graceful-readlink@1.0.1
│ │ │ │ ├─┬ is-my-json-valid@2.13.1
│ │ │ │ │ ├── generate-function@2.0.0
│ │ │ │ │ ├─┬ generate-object-property@1.2.0
│ │ │ │ │ │ └── is-property@1.0.2
│ │ │ │ │ ├── jsonpointer@2.0.0
│ │ │ │ │ └── xtend@4.0.1
│ │ │ │ └─┬ pinkie-promise@2.0.1
│ │ │ │ └── pinkie@2.0.4
│ │ │ ├─┬ hawk@3.1.3
│ │ │ │ ├── boom@2.10.1
│ │ │ │ ├── cryptiles@2.0.5
│ │ │ │ ├── hoek@2.16.3
│ │ │ │ └── sntp@1.0.9
│ │ │ ├─┬ http-signature@1.1.1
│ │ │ │ ├── assert-plus@0.2.0
│ │ │ │ ├─┬ jsprim@1.3.0
│ │ │ │ │ ├── extsprintf@1.0.2
│ │ │ │ │ ├── json-schema@0.2.2
│ │ │ │ │ └── verror@1.3.6
│ │ │ │ └─┬ sshpk@1.8.3
│ │ │ │ ├── asn1@0.2.3
│ │ │ │ ├── assert-plus@1.0.0
│ │ │ │ ├─┬ dashdash@1.14.0
│ │ │ │ │ └── assert-plus@1.0.0
│ │ │ │ ├── ecc-jsbn@0.1.1
│ │ │ │ ├─┬ getpass@0.1.6
│ │ │ │ │ └── assert-plus@1.0.0
│ │ │ │ ├── jodid25519@1.0.2
│ │ │ │ ├── jsbn@0.1.0
│ │ │ │ └── tweetnacl@0.13.3
│ │ │ ├── is-typedarray@1.0.0
│ │ │ ├── isstream@0.1.2
│ │ │ ├── json-stringify-safe@5.0.1
│ │ │ ├─┬ mime-types@2.1.11
│ │ │ │ └── mime-db@1.23.0
│ │ │ ├── node-uuid@1.4.7
│ │ │ ├── oauth-sign@0.8.2
│ │ │ ├── qs@6.2.0
│ │ │ ├── stringstream@0.0.5
│ │ │ ├── tough-cookie@2.2.2
│ │ │ └── tunnel-agent@0.4.3
│ │ ├─┬ rimraf@2.5.3
│ │ │ └─┬ glob@7.0.5
│ │ │ ├── fs.realpath@1.0.0
│ │ │ ├── inflight@1.0.5
│ │ │ ├─┬ minimatch@3.0.2
│ │ │ │ └─┬ brace-expansion@1.1.5
│ │ │ │ ├── balanced-match@0.4.2
│ │ │ │ └── concat-map@0.0.1
│ │ │ └── path-is-absolute@1.0.0
│ │ ├── semver@5.2.0
│ │ ├─┬ tar@2.2.1
│ │ │ ├── block-stream@0.0.9
│ │ │ ├─┬ fstream@1.0.10
│ │ │ │ └── graceful-fs@4.1.4
│ │ │ └── inherits@2.0.1
│ │ └─┬ tar-pack@3.1.4
│ │ ├─┬ debug@2.2.0
│ │ │ └── ms@0.7.1
│ │ ├── fstream-ignore@1.0.5
│ │ ├─┬ once@1.3.3
│ │ │ └── wrappy@1.0.2
│ │ ├─┬ readable-stream@2.1.4
│ │ │ ├── buffer-shims@1.0.0
│ │ │ ├── core-util-is@1.0.2
│ │ │ ├── isarray@1.0.0
│ │ │ ├── process-nextick-args@1.0.7
│ │ │ ├── string_decoder@0.10.31
│ │ │ └── util-deprecate@1.0.2
│ │ └── uid-number@0.0.6
│ ├── glob-parent@2.0.0
│ ├── inherits@2.0.3
│ ├─┬ is-binary-path@1.0.1
│ │ └── binary-extensions@1.7.0
│ ├─┬ is-glob@2.0.1
│ │ └── is-extglob@1.0.0
│ └─┬ readdirp@2.1.0
│ ├─┬ readable-stream@2.2.2
│ │ ├── buffer-shims@1.0.0
│ │ ├── core-util-is@1.0.2
│ │ ├── isarray@1.0.0
│ │ ├── process-nextick-args@1.0.7
│ │ ├── string_decoder@0.10.31
│ │ └── util-deprecate@1.0.2
│ └── set-immediate-shim@1.0.1
├─┬ commander@2.9.0
│ └── graceful-readlink@1.0.1
├── convert-source-map@1.3.0
├── fs-readdir-recursive@1.0.0
├─┬ glob@5.0.15
│ ├─┬ inflight@1.0.6
│ │ └── wrappy@1.0.2
│ └── once@1.4.0
├── lodash@4.17.2
├─┬ output-file-sync@1.1.2
│ ├── graceful-fs@4.1.11
│ └── object-assign@4.1.0
├── path-is-absolute@1.0.1
├── slash@1.0.0
├── source-map@0.5.6
└─┬ v8flags@2.0.11
└── user-home@1.1.1
上面有报错信息：npm WARN enoent ENOENT: no such file or directory, open '/Users/jinghua/es6_demo/package.json'
就命令运行：
localhost:es6_demo jinghua$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (es6_demo)
version: (1.0.0)
description: ceshi
entry point: (text.js)
test command:
git repository:
keywords:
author: zhou
license: (ISC)
About to write to /Users/jinghua/es6_demo/package.json:
{
"name": "es6_demo",
"version": "1.0.0",
"description": "ceshi",
"main": "text.js",
"dependencies": {
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "zhou",
"license": "ISC"
}
Is this ok? (yes) yes
基本用法如下：
新建一个test文件
(x => x * 2)(1)
# 转码结果输出到标准输出
$ babel example.js
"use strict";
(function (x) {
return x * 2;
})(1);
# 转码结果写入一个文件
# --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
执行命令运行，就进入REPL环境
$ babel-node
> (x => x * 2)(1)
2
babel-node命令可以直接运行ES6脚本
新建一个文件test.js,试试能运行：
function sleep(ms = 0) {
return new Promise((resolve, reject) => setTimeout(resolve, ms));
}
async function test() {
for (let i = 0; i < 10; i++) {
await sleep(500);
console.log(`i=${i}`);
}
}
test().then(() => console.log('done'));
执行以下命令：
localhost:es6_demo jinghua$ babel-node test.js
i=0
i=1
i=2
i=3
i=4
i=5
i=6
i=7
i=8
i=9
done
参考地址：