ES6 check AND Babel

来源:互联网 发布:淘宝店铺名怎么修改 编辑:程序博客网 时间:2024/05/17 06:13
  1. 检查各种运行环境对 ES6 的支持情况。
    工具: ES-Checker
    访问ruanyf.github.io/es-checker,可以看到浏览器对 ES6 的支持程度。
    or
    运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度。

    $ npm install -g es-checker
    $ es-checker
  2. Babel转码器
    Babel,可将ES6代码转为ES5,在不支持ES6的环境下运行。
    这里写图片描述
    Babel的配置文件 .babelrc,在项目根目录下。
    Create a .babelrc file (or use your package.json),基本格式如下:

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

    Babel can convert JSX syntax and strip out type annotations.
    这里写图片描述
    命令行转码 babel-cli 工具

    安装命令: $ npm install --global babel-cli

    Compile Files
    -> Compile the file script.js and output to stdout.

    $ babel script.js

    -> output to a file you may use –out-file or -o

    $ babel script.js --out-file script-compiled.js

    -> compile a file every time that you change it, use the –watch or -w

    $ babel script.js --watch --out-file script-compiled.js

    Compile with Source Maps
    -> add a source map file you can use –source-maps or -s

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

    -> If you would rather have inline source maps, you may use –source-maps inline.

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

    Compile Directories
    -> Compile the entire src directory and output it to the lib directory. You may use –out-dir or -d.

    $ babel src --out-dir lib

    -> Compile the entire src directory and output it to the one concatenated file.

    $ babel src --out-file script-compiled.js

    Ignore files
    -> Ignore spec and test files

    $ babel src --out-dir lib --ignore spec.js,test.js

    Copy files
    -> Copy files that will not be compiled

    $ babel src --out-dir lib --copy-files

    …… 更多
    上述命令在全局环境下,如果项目要运行,全局环境必须要有Babel,项目产生了对环境的依赖,另一方面,这样做也无法支持不同项目使用不同版本的 Babel。
    解决办法:将babel-cli安装在项目中

    $ npm install --save-dev babel-cli

    改写package.json

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

    转码的时候,执行命令:$ npm run build

资源出处

原创粉丝点击