babel6

作者: Ray1214 | 来源:发表于2016-08-20 00:22 被阅读0次

记录babel6的使用教程(举个栗子):

说明:
-----2016/8/20发布第一版;-----
1.这里假设你懂node的npm基本操作;
2.cli---命令行界面,下文会用cli代指;

开始之前:

国内使用npm安装包的时候有时会很慢,这里推荐大家使用nrm这个插件,执行:

//全局安装nrm,切换管理npm源
npm install nrm -g

nrm ls命令查看所有源:

nrm ls命令.png
nrm test命令测试所有源速度:
nrm test命令.png
nrm use taobao命令切换源(这里切换至taobao源):
nrm use命令.png

快速开始:

  1. 新建项目babel6
  2. 进入cli,切换至babel6目录,执行:
//该命令用于创建nodejs项目必不可少的package.json配置文件
npm init
  1. 安装开发环境依赖,执行操作:
//安装babel需要的插件
 npm install babel-cli babel-core babel-preset-es2015 --save-dev
  1. 为了能每一次都非常简单的使用编译命令,更新你的 package.json文件为Babel添加一个构建命令---在 package.json中添加一个scripts字段:
//命令解析:监听js文件夹下的文件,并将编译后的文件输出至build文件夹,最后生成map-source;
"scripts": {
    "build": "babel -w js/ -d build -s"
  },
  1. 在项目根目录新建.babelrc配置文件,并写入:
//该文件为babel的配置文件
{
    "presents":  ["es2015"]
}
  1. 进入cli,执行命令:
//此命令会一直监听并执行编译工作
npm run build

未完,待续...

相关文章

  • babel6 升级总结

    随着越来越多的库升级至 babel6,将项目升级至 babel6 迫在眉睫。在这里总结将 项目升级至 babel6...

  • babel6

    记录babel6的使用教程(举个栗子): 说明:-----2016/8/20发布第一版;-----1.这里假设你懂...

  • babel6

    babel安装 然后使用命令babel --help命令行提示You have mistakenly instal...

  • babel6配置过程

    babel6配置过程? 只需要下面几个babel插件,就能解析大部分ES方法 1、babel-core //必备的...

  • babel【3】:关于 babel 版本

    1、目前,前端开发领域使用的 Babel 版本主要的Babel6 和 Babel7 这两个版本。 你可能想问,怎么...

  • Using ES6 and ES7 in the Browser

    原文出处 这篇教程是使用Babel6用ES6全攻略系列的一部分,如果你对升级到Babel 6有问题的话,可以先看看...

  • Babel6的学习新姿势

    前言 在学习ES7的时候肯定会使用到Babel,然后就我就找了一些demo来看人家是如何配置Babel的,于是乎,...

  • nodejs + webpack4 + babel6 结合写Ch

    最近任务不忙,有时间了看一下Chrome插件相关的东西,于是想用nodejs + webpack写一个能直出插件的...

  • 【Babel】Babel5和Babel6区别

    时间:2016-08-12 17:04:10作者:zhongxia地址: babel 5.x -> 6.x 的变化...

  • babel6升babel7 出现Object.isSpreadP

    出现原因:babel-plugin-transform-object-rest-spread 依赖版本仍然是6.2...

网友评论

      本文标题:babel6

      本文链接:https://www.haomeiwen.com/subject/xttisttx.html