babel-cli相关使用 + .babelrc设置

官网:http://babeljs.io/docs/usage/cli/
参考:https://www.excaliburhan.com/post/babel-preset-and-plugins.html

npm install  babel-cli

安装babel-cli包后,就可以在命令行中使用babel命令进行文件编译转换操作。

babel XX.js --out-file YY.js (-o,转换文件)
babel src --out-dir lib (-d,转换目录)
babel XX.js --watch --out-file YY.js (-w,实时转换)
babel src --out-file script-compiled.js (将目录编译成一个文件)
babel src --out-dir lib --ignore spec.js,test.js(忽略文件)
babel src --out-dir lib --copy-files(文件原样拷贝,不编译)
babel script.js --out-file script-compiled.js --plugins=es2015,react(使用插件)
babel script.js --out-file script-compiled.js --presets=add-module-exports,transform-es2015-modules-amd(使用预设)
babel --no-babelrc script.js --out-file script-compiled.js --presets=add-module-exports,transform-es2015-modules-amd(忽略.babelrc)
babel-node 进入REPL环境(read-eval-print-loop)
babel-node XX.js 执行某js文件

对于.babelrc的推荐设置:

{
   "presets": [
        "es2015", 
        "stage-0",
        //"env"//有时候会是env,env不仅可以转换es6,还可以转换es7\es8代码到es5
    ],
   "plugins": ["transform-runtime"]
}

对于presets和plugins的执行顺序,参见官网:

babel-cli相关使用 + .babelrc设置_第1张图片
Paste_Image.png
· plugins优先于presets执行
· plugins按递增顺序执行
· presets按倒序执行(就是一堆plugins的预设)

babel-core:

核心编译器

babel-preset-env:

可以转换es6\es7\es8代码到es5

babel-preset-es2016:

只转译es6代码到es5,与babel-preset-env的选择可以视具体需求而定

babel-plugin-transform-runtime:

由于babel只转换新的语法,而不转换新的API,在项目中,为了使用新的API功能,就需要借助于transform-runtime插件。该插件的功能是:支持你使用Object.assign等实例方法、以及Promise、Set等新的API,但不支持使用 'abc'.includes('b') 等实例方法,要使用的话,还需要配合babel-polyfill包。
transform-runtime插件,每当你使用Object.assign等API时,都统一调用一个核心js,减少编译中产生的重复的工具方法,减少包的体积。
总结:相当于工具方法的polyfill,不如polyfill转译的功能多。

另:要是安装的eslint或者babel生效,要么要在package.json文件中字段声明,要么在对应目录下有对应的.eslintrc和.babelrc配置文件。

你可能感兴趣的:(babel-cli相关使用 + .babelrc设置)