专栏首页前端实习日记搭建babel将es6转es5环境

搭建babel将es6转es5环境

前言

babel 6与之前版本的区别: 之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。但在babel6中,将babel拆分成两个包: babel-clibabel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli,如果想要在node中使用就下载babel-core。 babel 6已结尽可能的模块化了,如果还用babel 6之前的方法转换ES6,它会原样输出,并不会转化,因为需要安装插件。

Babel提供babel-cli工具,用于命令行转码。以下摘自阮一峰

它的安装命令如下。

$ npm install --global babel-cli

基本用法如下:

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

上面代码是在全局环境下,进行Babel转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

$ npm install --save-dev babel-cli

然后改写package.json

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

转码时执行:

npm run build

如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。以下摘自阮一峰。

它的安装命令如下。

$ npm install babel-core --save

然后,在项目中就可以调用babel-core

var babel = require('babel-core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

例子:

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
  .transform(es6Code, {
    presets: ['es2015']
  })
  .code;
// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

上面代码中,transform方法的第一个参数是一个字符串,表示需要转换的ES6代码,第二个参数是转换的配置对象。 **

Demo:1.工具(gulp)转换法

项目目录结构:

① 在项目中安装 gulp执行:

npm install gulp --save-dev

② 安装转码规则:

npm install --save-dev gulp-babel babel-preset-es2015

此时的package.josn文件:

③ 编写gulpfile.js文件,文件内容如下所示:

var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default",function(){
    return gulp.src("js/a.js").pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest("lib"));
})

当我们在当前项目目录下运行

gulp

命令后,会发现原本在src文件夹中的a.js(按照ES6标准编写的)文件已经被转码成ES5标准的a.js,并放在了lib文件夹里面。

可能报错和原因

package.json文件不应该是空的。

如果你有空的包json文件,只需添加{}。

然后再试一次就行。 **

Demo:2.不使用工具

你得有.babelrc文件。Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。 该文件用来设置转码规则和插件,基本格式如下。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

① 配置项目规则 如下:

② 选择前言中的方法,安装babel-cli包:

$ npm install --global babel-cli

③ 执行命令:

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel js -d lib 

之后,你会看到js文件夹下的.js文件,全部转码到lib文件夹下,检查一下lib文件夹中的.js是否已经变为es5了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS:用rem来做响应式开发

    电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是...

    yuezhongbao
  • 插件:商品放大镜

    这段代码我哩哩啦啦写了三天多,平时都有活今天忙里偷闲想起之前放大镜这个功能写了一半(我是分两块写的, 先是让module就是那个遮罩层能自由的在图片上跟随鼠标走...

    yuezhongbao
  • Object.assign方法不能实现深复制

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),类似这样:

    yuezhongbao
  • 简单使用babel

    要使用babel,首先需要了解用的东西?它是一个用来进行ES6转化到ES5的转码器,从而在现有环境中进行执行。 一、配置文件.babelrc(搬运下) Babe...

    用户1148881
  • 大前端的自动化工厂(3)—— babel

    babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境。

    大史不说话
  • 【前端词典】关于 Babel 你必须知道的

    我第一次打开搜索引擎查询关于 Babel 的资料时,出现的竟然是关于 Babel 的传说。后来我花了小一天的时间去了解这个传说(来自《旧约圣经》)。

    小生方勤
  • Babel 入门指南

    Babel 入门指南 ​⚠ 注意: Babel 可以与很多构建工具(如 Browserify、Grunt、Gulp 等)进行集成。由于本教程选择 Webpa...

    静默虚空
  • Babel 入门教程

    (说明:本文选自我的新书《ES6 标准入门(第二版)》的第一章《ECMAScript 6简介》) Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代...

    ruanyf
  • 3、webpack从0到1-使用babel打包

    Ewall
  • CRA (create-react-app) IE 兼容方案

    其实都是 ES6 语法不支持导致了,理论上经过 babel 处理后就好。尝试了在入口文件中加入官方提供的 react-app-polyfill 和 babel ...

    kmokidd

扫码关注云+社区

领取腾讯云代金券