首页 ›存档› 技术 › 查看内容

【第879期】使用 Babel 和 Gulp 搭建 ES6 开发环境

2018-3-30 13:00 |来自: 互联网 281 0

摘要: 前言这是《从零开始构建 JavaScript 技术栈》第三篇，不知道你开始动手了吗？今天早读文章继续由 @pd4d10 带来翻译授权分享。正文从这开始~ 我们将使用 ES6 语法，它相比于 ES5 有了很大改进。到目前为止，几乎所 ...

前言

这是《从零开始构建 JavaScript 技术栈》第三篇，不知道你开始动手了吗？今天早读文章继续由 @pd4d10 带来翻译授权分享。

正文从这开始~

我们将使用 ES6 语法，它相比于 ES5 有了很大改进。到目前为止，几乎所有的浏览器和 JS 运行环境都支持 ES5，但不是所有的都支持 ES6。所以我们将使用一个叫做 Babel 的工具，将 ES6 代码转换成 ES5 代码。为了运行 Babel，我们需要 Gulp。它类似于 package.json 的 scripts 中的任务，但是将任务写在 JS 文件中比使用 JSON 文件更简单清晰。我们将安装 Gulp 和 Gulp 的 Babel 插件：

运行 yarn add --dev gulp
运行 yarn add --dev gulp-babel
运行 yarn add --dev babel-preset-latest
运行 yarn add --dev del（执行 clean 任务使用的包）

在 package.json 中增加一个 babel 字段，添加如下代码将使用最新的 Babel 配置：

"babel": {
 "presets": [
  "latest"
 ]
},

注意：你也可以使用根目录下的 .babelrc 文件来保存 Babel 配置。随着项目变得复杂，根目录的文件将越来越多，所以我们在 package.json 中保存 Babel 的配置。

将 index.js 移动到一个名为 src 的新文件夹，用于存放 ES6 代码，编译后的 ES5 代码存放在 lib 文件夹。Gulp 和 Babel 会帮我们完成编译。删除 index.js 中有关 color 的代码，将其替换为以下更简单的版本：

const str = 'ES6';
console.log(`Hello ${str}`);

这里用到了模板字符串，这是一个 ES6 中的新功能，可以直接使用 ${} 在字符串中插入变量。有一点需要注意，模板字符串使用的是反引号。

新建 gulpfile.js 文件，包含以下内容：

const gulp = require('gulp');
const babel = require('gulp-babel');
const del = require('del');
const exec = require('child_process').exec;

const paths = {
 allSrcJs: 'src/**/*.js',
 libDir: 'lib',
};

gulp.task('clean', () =

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：完阿里。新，你不如一和尚寺下一篇：高质量文书弥补sub成绩短板，布朗大学录取大洋彼岸飞来的大礼！

【第879期】使用 Babel 和 Gulp 搭建 ES6 开发环境

相关分类