Babel 6 特性总结

0. 改进

  • 模块化
  • 可选的插件
  • 预设
  • 性能改进
  • 插件 API
// Babel 5
export default function ( {Plugin, types: t} ) {
    return new Plugin('ast-transform', {
        visitor: { ... }
    });
}
                      
// Babel 6
export default function ( { types: t} ) {
    return {
        visitor: { ... }
    };
}

1.安装 Babel 6

npm install

  • babel-cli
    • usage: babel app.js
    • command:
      • -o --out-file
      • -d --out-dir
      • -w --watch
      • --source-maps
  • babel-register
 //index.js
console.log('Hello World!');
//register.js
require("babel-register");
require("./index.js");
node register.js

注:生产环境不适用

  • babel-node
{
  "scripts": {
    //"script-name": "node index.js"
    "script-name": "babel-node index.js"
  }
}

command:

  • --presets
  • --plugins
  • --ignore

注:生产环境不适用

  • babel-core
var babel = require("babel-core");

babel.transform("code();", options);
// => { code, map, ast }

babel.transformFile("filename.js", options, function(err, result) {
  result; // => { code, map, ast }
});

babel.transformFileSync("filename.js", options);
// => { code, map, ast }

2. 配置 Babel 6

//.babelrc

{
  "presets": [],
  "plugins": []
}


//or package.json
{
  ...
  "babel":{
    "presets": [],
  	"plugins": []
  }
}
  • presets
    • babel-preset-es2015
    • babel-preset-react
    • babel-preset-stage-x(x=0,1,2,3)
    {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

  • plugins
    • babel-plugin-transform-es2015-classes
    • babel-plugin-transform-es2015-arrow-functions
{
    "plugins": [
      "transform-es2015-classes",
      "transform-es2015-arrow-functions"
    ]
  }
 
  • loose mode
{
    "plugins": [
      //"transform-es2015-classes"
      ["transform-es2015-classes", { "loose": true }]
    ]
  }

扩展—— Babel 6 loose

  • 基于环境自定义 Babel
 {
    "presets": ["es2015"],
    "plugins": [],
    "env": {
      "development": {
        "plugins": [...]
      },
      "production": {
        "plugins": [...]
      }
    }
  }

env : process.env.BABEL_ENV or process.env.NODE_env

3. Webpack

//webpack.config.js
var path = require('path');
    ···
    module.exports = {
        ···
        module: {
            loaders: [
                {
                    loader: 'babel-loader',
                    test: path.resolve(__dirname, 'js'),
                    query: {
                        presets: ['es2015'],
                    },
                }
            ]
        },
        ···
    };
  • tree-shaking

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏grain先森

JS 知识架构图

以前开发者只要掌握 HTML、CSS、JavaScript 三驾马车就能胜任一份前端的工作了。而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端、跨平台实...

37620
来自专栏京程一灯

献给前端er的各种小技巧(纯干货)

1.Firefox 的查看页面源代码功能,可以一眼发现未闭合的标签、未转义的HTML字符,另一种办法,提交页面代码到 http://validator.w3.o...

8730
来自专栏grain先森

前端项目如何管理

在一个项目内,当有多个开发者一起协作开发时,或者功能越来越多、项目越来越庞大时,保证项目井然有序的进行是相当重要的。一般会从下面几点来考证一个项目是否管理得很好...

14930
来自专栏京程一灯

前端入门书前端学习网站

入门可以通过啃书,但书本上的东西很多都已经过时了,在啃书的同时,也要持续关注技术的新动态。这里推几本我觉着不错的书:

12510
来自专栏grain先森

19 年学好前端的6点建议

要成为一名年薪30W的前端工程师,基础一定要掌握牢固,基础知识一问三不知,岂不是要贻笑大方。

8820
来自专栏grain先森

你真懂 CSS 吗?

其一,HTML Parser 生成的 DOM 树; 其二,CSS Parser 生成的 Style Rules ;

10310
来自专栏grain先森

React 中使用CSS

注意事项: 在正常的css中,比如background-color,box-sizing等属性,在style对象div1中的属性中,必须转换成驼峰法,back...

13830
来自专栏京程一灯

只会用jQuery前端到底low不low?

如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读,因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的...

16240
来自专栏grain先森

怎样才能写出更好的 CSS

让我们开门见山:编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行,但是 CSS 还是算了吧。

9710
来自专栏京程一灯

前端开发面试题答案(二)

(2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border);

13340

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励