前端自动化之babel本地化安装

Posted 2020-08-27

npm添加package.json

cd到项目根目录直接调用npm init 会创建package.json文件

本地安装bebel(并非全局安装，这种情况下cmd命令中babel命令不识别)：

步骤参考http://babeljs.io/

　　1.安装  npm install --save-dev babel-cli babel-preset-env

　　2.项目根目录创建 .babelrc文件

　格式如下：

1 {
2   "presets": ["env"]
3 }

这个presets属性后面的数组值表示babel组件

env表示babel-preset-env

react表示 babel-preset-react

先本地安装到项目文件夹下 npm install --save-dev 组件名

在手动在.babelrc文件上添加

注：本地安装的babel命令是通过npm在package中script属性下调用本例子中想查看babel版本，在package中属性scripts中添加属性getbabelVersion

package.json文件如下

{
  "name": "project-blog",
  "version": "0.0.1",
  "description": "folder to study sass npm yeoman",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib",
    "getbabelVersion" :"babel --version"
  },
  "author": "Tangerwei",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-env": "^1.1.6",
    "babel-preset-react": "^6.16.0"
  }
}

然后本目录下运行（注意把执行路径切换到项目根目录下，package也在此目录下） npm run getbabelVersion

输出：6.18.0 (babel-core 6.21.0)

而且注意一点，执行babel命令的时候会自动更新devDependencies属性

至此 babel插件安装完成。

附加：babel默认只转换语法，并不转换api，倘若是es6中出现的api，es5中并没有怎么办？利用 babel-polyfill

然后，在脚本头部，加入如下一行代码。

import("babel-polyfill");或者require("babel-polyfill");

详细清单可以查看https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js文件

npm run build 编译，但是还需要安装一个babel-preset-es2015

babel安装使用的坑 参考 http://www.imooc.com/article/11157，非常好的一篇文章，不过和我一样的新手需要手动安装的同时多看几遍

思考：

的确npm的使用有相当强的js风格，利用json作为配置跟项目如出一辙

npm的可以在package.json调用本地的node插件，这样可以在本地直接完成js，css往原生和低版本方向的编译。而发布经过编译版本，编程效率确实有很大的提高，

不仅如此，甚至js的低版本兼容性更好。