Babel编译

Babel的目的就是让你可以使用最新的标准来开发,然后把兼容的问题交给它来完成.比如我如何在使用ES6的语法写完之后将其转换为ES5满足通用性呢?

先用这个最常用的Babel的用法来引入吧.

一  首先在项目中新建一个package.json文件,也可以使用 npm init 自动生成.

这里简单提一下,没有fq的话建议使用国内的淘宝镜像,速度会快很多,特别是类似Bable这样安装的内容比较多的情况,使用下列命令即可

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

二  安装babel的命令行工具,babel-cli这里安装到开发环境,之后就可以使用babel相关的命令了.

cnpm install babel-cli -D

三  安装完成babel-cli之后需要所需编译的预设(preset), 这里我们用到了ES6

cnpm i babel-preset-es2015 -D

但是在安装完成之后会发现有一个不推荐提示,

deprecate babel-preset-es2015@* ????  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

现在已经不提倡使用以上的方法了,而是

cnpm i babel-preset-env -D

现在东西都装好了,下面开始使用工具吧.

四  新建一个.babelrc用于配置预设presets

{
    "presets" :["env"]
}

五  除了预设之外还有插件plugin,

比如我在代码中使用了export和import,如果浏览器不支持这个用法便会报错.可以使用插件来编译为浏览器可兼容的语法.

{
    "plugins": [
        "transform-es2015-modules-umd"
    ]
}

当然也需要先 cnpm i babel-plugin-transform-es2015-modules-umd -D 安装到开发环境

六  在package.json中你可以看到已经将之前安装的模块添加到devDependencies中了.

七  在script中添加一个脚本

一般来说会将一个js文件夹下的所有js文件进行编译,使用方式就是babel <dirname> -d <new dirname>, 还有一个很实用的小技巧就是使用-w进行文件监视,避免了重复手动编译的过程.

  "scripts": {
    "build": "babel js -w -d lib"
  },

八  执行 npm run build ,将js文件夹中的js代码编译到lib文件夹中.

九  将其他地方的文件(比如我的index.html中的js)路径修改定位到编译后的文件就可以使用啦!!

在体验了babel之后,最大的体会就是,

写自己的代码,让babel去转换吧!