首页 > 代码库 > 前端自动化之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本地化安装