首页 > 代码库 > 前端自动化之babel本地化安装

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

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的低版本兼容性更好。

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