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文件

 格式如下:

 {
"presets": ["env"]
}

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

package.json参考http://javascript.ruanyifeng.com/nodejs/packagejson.html

babel常用命令参考http://www.ruanyifeng.com/blog/2016/01/babel.html

前端自动化之babel本地化安装的更多相关文章

  1. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  2. gulp前端自动化入门

    一.从零开始搭建gulp前端自动化 1.首先安装nodejs 2.npm init 初始化 生成package.json 2.1 可以选装cnpm cnpm是淘宝提供的服务 安装:命令提示符执行npm ...

  3. Grunt安装配置教程:前端自动化工作流

    Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...

  4. 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装

    最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...

  5. 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  6. 【前端自动化】Gulp的使用(一):安装gulp

    作为一个.NET码农,在前端高速发展的时代,深深感觉自己那么点“前端”技术不够看,比如开发出来的js css等文件庞大,不便于管理,还记得以前的开发就是累加 html  css   jquery, 现 ...

  7. 安装并配置前端自动化工具-gulp

    由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...

  8. 用webpack实现前端自动化构建

    什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...

  9. 前端自动化gulp遇上es6从 无知到深爱

    Gulp是什么? Gulp是前端自动化的工具,但Gulp能用来做什么 1.搭建web服务器 2.使用预处理器Sass,Less 3.压缩优化,可以压缩JS CSS Html 图片 4.自动将更新变化的 ...

随机推荐

  1. SRM 398(1-250pt)

    题意:有两个变量x和y,三种运算符+,*,-,组成等式"变量 运算符 变量 运算符 变量 运算符 变量",要求每个变量恰好出现两次,且等式的值为val的等式有多少个.注意不计算运算 ...

  2. Ignoring a Test

    如果我们不想让某个测试失败,我们仅仅想要忽略它,那么我们可以暂时的disable它. 有三种方法来忽略一个测试: 把方法注释掉 删除 @Test 注释 增加 @Ignore注释: @Ignore([i ...

  3. ural 1136. Parliament

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1136 题目描述:给定一个按照(左子树-右子树-根)(即先序)遍历序列的树,求其按照 右子 ...

  4. 004_Eclipse编写第一个Java_Web程序

    1.MyEclipse的菜单栏--File--Web Project,新建一个web工程 Project name 填上自己的项目名称,例如HelloWorld. 需要选择Java EE版本以及Tar ...

  5. C#中操作WMI的类库-实现远程登录共享

    WMI是Windows Management Instrumentation的简称,即:视窗管理规范.在Windows 2000或以后的版本中均安装得有,NT4.0则需要安装WMI的核心组件.通过WM ...

  6. Swift-Dictionary

    1.字典写法 Dictionary<KeyType,ValueType>,KeyType是你想要储存的键,ValueType是你想要储存的值. 唯一的限制就是KeyType必须是可哈希的, ...

  7. 安卓扫码:简单的ZXing使用记录

    ZXing是Google提供的条形码.二维码等的生成.解析的库.最近工作需求去研究了一下,主要是研究怎么扫描二维码(QRCode).网上教程也不少,但大多看了不明所以,甚至看了半天都不知道解码到底从哪 ...

  8. Codeforces 526D - Om Nom and Necklace 【KMP】

    ZeptoLab Code Rush 2015 D. Om Nom and Necklace [题意] 给出一个字符串s,判断其各个前缀是否是 ABABA…ABA的形式(A和B都可以为空,且A有Q+1 ...

  9. win10的独立存储

    win10的独立存储和win8的大致相同 Windows.Storage.ApplicationDataContainer roamingSettings = Windows.Storage.Appl ...

  10. 从今天开始学习C#啦

    此博客为证,在下从今天开始学习C#,并把心得体会记录下来.