美文网首页
ECMAScript 6学习记录之先导篇-babel工具的使用

ECMAScript 6学习记录之先导篇-babel工具的使用

作者: 四月天__ | 来源:发表于2017-07-12 10:00 被阅读6次

文章参考阮一峰老师的博客,在这里表示感谢!
1、babel的安装
命令行安装
1、首先新建项目文件夹(mkdir+项目名称),cd 项目目录下,执行 npm init
一路回车创建package.json文件。(后面项目的配置信息都要在这里配置!)
接着执行以下命令:

2、在项目根目录创建.babelrc配置文件,配置一下代码

{
    "presets": ["latest"],//这里也可以使用"es2015"
    "plugins": []
}

3、npm install --save-dev babel-preset-latest 安装最新的ES6转码规则
4、npm install --save-dev babel-cli 安装babel转码以及附带的工具到项目目录而不是全局安装,因为全局安装之后不能再不同项目里面使用不同版本的babel了。执行终端命令 mkdir src创建资源文件夹,然后,改写package.json。如下所示:

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}
//注意项目里面要有src目录(放要编译的ES6文件),
//因为脚本编译命令是从这个文件夹里寻找ES6文件的。否则编译失败!

到这里执行npm run build命令就可以把src文件夹里面写好的ES6文件转码为ES5文件并且输出存放在lib文件夹中。
5、npm install babel-core 安装浏览器版本的构建工具

语法学习:
参考文章:30分钟掌握ES6/ES2015核心内容

相关文章

  • ECMAScript 6学习记录之先导篇-babel工具的使用

    文章参考阮一峰老师的博客,在这里表示感谢!1、babel的安装命令行安装1、首先新建项目文件夹(mkdir+项目名...

  • js面试课程

    一、ES6学习 Ⅰ、Babel的使用 Babel是一个JavaScript编译器,主要用于将ECMAScript ...

  • ES6常用特性(一)

    本文根据阮一峰老师《ECMAScript 6 入门》一书记录,只记录常用特性,适合快速学习 一、 Babel转码器...

  • Babel使用姿势

    本篇围绕gulp记录Babel的使用,其它工具差不多 1、安装gulp-babel babel的作用是将ES6转换...

  • es6-selfnote

    ECMAScript6(ES6)基础知识及核心原理 使用Babel编译ES6 一、下载安装Babel环境:需要电脑...

  • 《ECMAScript 6 入门》Babel学习

    使用Babel第一步,需要写 .babelrc 配置文件。基本格式如下: presets 字段设定转码规则,官方提...

  • ES6 常用语法 一

    ES6 是什么 ECMAScript 2015 于2015年6月正式发布 可以使用babel语法转换器,支持低端浏...

  • Babel 是什么?

    Babel 是一个 JavaScript 编译器 Babel 是一个工具链,主要用于将采用 ECMAScript ...

  • Babel

    Babel 是什么? Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后...

  • ECMA、ECMAScript、javascript、ES6、J

    ECMA、ECMAScript、javascript、ES6、JavaScript 引擎、宿主环境、Babel 等...

网友评论

      本文标题:ECMAScript 6学习记录之先导篇-babel工具的使用

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