Giter Club home page Giter Club logo

es6's Introduction

babel编译ES6shine

ECMAScript 6(ES6) 的发展或者说普及之快可以说是难以想象的,对很多人来说 ECMAScript 5(ES5) 都还普及呢。现代浏览器对 ES6 新特新或多或少的有些支持,但支持度不高,所以要想在浏览器中直接使用 ES6 的新特性,还得等上一段时间。 对 ES6 的普及起到至关重要的就不得不说 babel 了。 babel 可以将 ES6 代码完美地转换为 ES5 代码,所以我们不用等到浏览器的支持就可以在项目中使用 ES6 的特性。

安装babel

$ npm install -g babel

一般来说安装node模块,使用官网速度比较慢,所以建议使用淘宝滤镜文件。

$ npm install -g babel --registry=https://registry.npm.taobao.org

测试编译

$ babel es6.js

提示错误:

The CLI has been moved into the package `babel-cli`.
npm install -g babel-cli

要求安装babel-cli,那么你就安装呗:

$ npm install -g babel-cli

或者提示:

You have mistakenly installed th `babel` packge, which is a no-op in Babel ......
    npm uninstall babel
    npm install babel-cli
See http://babeljs.io/docs/usage/cli/ for setup instructions.

意思要求删除babel直接安装babel-cli,那么请直接执行:

$ npm uninstall babel
$ npm install -g babel-cli --registry=https://registry.npm.taobao.org

再次测试编译

$ babel es6.js

输出仍是ES6源码!玛尼? 原来是没有安装babel-preset-es2015插件,再安装吧:

$ npm install babel-preset-es2015 --registry=https://registry.npm.taobao.org

然后执行:

$ babel es6.js --presets es2015

终于可以啦。

编译成文件

编译单人文件为ES5

$ babel es6.js --presets es2015 -o es5.js
  # 或者
$ babel es6.js --presets es2015 --out-file es5.js

也可以整个文件夹编译,es6文件所有文件编译到es5文件夹下:

$ babel es6/ --presets es2015 -d es5/
# 或者
$ babel es6/ --out-dir es5/

整个文件夹编译到一个js文件里:

$ babel es6/ --out-file es5.js

编译同时生成源文件

$ babel script.js --out-file script-compiled.js --source-maps
# 
$ babel script.js -o script-compiled.js --s

如果你想生成只有一行的文件,可使用inline参数:

$ babel script.js --out-file script-compiled.js --source-maps inline

实时编译文件

$ babel --watch es6.js --out-file es5.js 

--watch命令即开启监听文件编辑功能,只要有修改就会同步编译好。那你就可以即时看到效果了。 如果要强制退出就安Ctrl+C键退出。

babel视频

es6's People

Contributors

scscms avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

amujoin

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.