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. 《University Calculus》-chaper13-多重积分-三重积分的引入

    承接之前对一重积分和二重积分的介绍,这里我们自然的引出三重积分. 在二重积分的引入中,我们曾经埋下过一个小伏笔,二重积分的几何意义是求解一个体积,但是我们仅仅限定在了曲顶柱体的几何体,那么对于完全由曲 ...

  2. Intellij 快捷键大全

    Intellij IDEA的快捷键非常好用,能大大提高我们的开发速度.这里列举了一些常用的快捷键. 快速查找: Ctrl+N  查找类 Ctrl+R  替换当前窗口的文本 Ctrl+F  当前代码中查 ...

  3. java參数传递机制浅析

    欢迎转载,转载请声明出处! ----------------------------------------- 前言: java语言中,參数的传递仅仅有一种机制.那就是值传递. 举例: 以下将通过几个 ...

  4. RHEL6.4编译安装gcc4.8.1

    因为平时用的linux虚拟机都是RHEL6.4, 自带的gcc版本号太低,不支持C++11,而从gcc4.8.1開始, gcc完美支持C++11全部特性. 故升级了一下. 以下是具体步骤: 1. 下载 ...

  5. FFmpeg的HEVC解码器源码简单分析:解析器(Parser)部分

    ===================================================== HEVC源码分析文章列表: [解码 -libavcodec HEVC 解码器] FFmpeg ...

  6. Java EE 7 / JAX-RS 2.0: Simple REST API Authentication & Authorization with Custom HTTP Header--reference

    REST has made a lot of conveniences when it comes to implementing web services with the already avai ...

  7. Android(java)学习笔记233: 远程服务的应用场景(移动支付案例)

    一. 移动支付:       用户需要在移动终端提交账号.密码以及金额等数据 到 远端服务器.然后远端服务器匹配这些信息,进行逻辑判断,进而完成交易,返回交易成功或失败的信息给移动终端.用户提交账号. ...

  8. Linux基础系列—Linux内核源码目录结构

    /** ****************************************************************************** * @author    暴走的小 ...

  9. 【转】string常用函数

    原文地址:http://hi.baidu.com/baowup/blog/item/3a27465c86d71546faf2c066.html/cmtid/de1ef3f0de7554a0a40f52 ...

  10. 使用MiniProfiler调试Asp.net Mvc性能

    使用nuget添加MiniProfiler.EF组件 在Global文件中配置MiniProfiler protected void Application_Start() { AreaRegistr ...