gulp + gulp-better-rollup + rollup 构建 ES6 开发环境
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境
关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个,Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此,Gulp 构建 ES6 开发环境的方案有很多,例如:webpack-stream、rollup-stream 、browserify等,本文讲述使用 gulp-better-rollup 的构建过程。gulp-better-rollup 可以将 rollup 更深入地集成到Gulps管道链中。
GitHub地址:https://github.com/JofunLiang/gulp-translation-es6-demo
构建基础的 ES6 语法转译环境
首先,安装 gulp 工具,命令如下:
$ npm install --save-dev gulp
安装 gulp-better-rollup 插件,由于 gulp-better-rollup 需要 rollup 作为依赖,因此,还要安装 rollup 模块和 rollup-plugin-babel(rollup 和 babel 之间的无缝集成插件):
$ npm install --save-dev gulp-better-rollup rollup rollup-plugin-babel
安装 babel 核心插件:
$ npm install --save-dev @babel/core @babel/preset-env
安装完成后,配置 .babelrc 文件和 gulpfile.js文件,将这两个文件放在项目根目录下。
新建 .babelrc 配置文件如下:
{
"presets": [
[
"@babel/env",
{
"targets":{
"browsers": "last 2 versions, > 1%, ie >= 9"
},
"modules": false
}
]
]
}
新建 gulpfile.js 文件如下:
const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel"); gulp.task("babel", () => {
return gulp.src("src/**/*.js")
.pipe(rollup({
plugins: [babel()]
},{
format: "iife"
}))
.pipe(gulp.dest("dist"))
}) gulp.task("watch", () => {
gulp.watch("src/**/*.js", gulp.series("babel"))
}) gulp.task("default", gulp.series(["babel", "watch"]))
在 src 目录下使用 ES6 语法新建 js 文件,然后运行 gulp 默认任务,检查 dist 下的文件是否编译成功。
使用 ployfill 兼容
经过上面的构建过程,成功将 ES6 语法转译为 ES5 语法,但也仅仅是转换的语法,新的 api(如:Set、Map、Promise等) 并没有被转译。关于 ployfill 兼容可以直接在页面中引入 ployfill.js 或 ployfill.min.js 文件实现,这种方式比较简单,本文不再赘述,下面讲下在构建中的实现方式。
安装 @babel/plugin-transform-runtime 、@babel/runtime-corejs2 和 core-js@2(注意:core-js的版本要和@babel/runtime的版本对应,如:@babel/runtime-corejs2对应core-js@2)。@babel/plugin-transform-runtime 的作用主要是避免污染全局变量和编译输出中的重复。@babel/runtime(此处指@babel/runtime-corejs2)实现运行时编译到您的构建中。
$ npm install --save-dev @babel/plugin-transform-runtime @babel/runtime-corejs2 core-js@2
修改 .babelrc 文件:
{
"presets": [
[
"@babel/env",
{
"targets":{
"browsers": "last 2 versions, > 1%, ie >= 9"
},
"modules": false
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": 2
}
]
]
}
同时修改 gulpfile.js 文件,给 rollup-plugin-babel 配置 runtimeHelpers 属性如下:
const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel"); gulp.task("babel", () => {
return gulp.src("src/**/*.js")
.pipe(rollup({
plugins: [
babel({
runtimeHelpers: true
})
]
},{
format: "iife"
}))
.pipe(gulp.dest("dist"))
}) gulp.task("watch", () => {
gulp.watch("src/**/*.js", gulp.series("babel"))
}) gulp.task("default", gulp.series(["babel", "watch"]))
再安装 rollup-plugin-node-resolve 和 rollup-plugin-commonjs,这两个插件主要作用是注入 node_modules 下的基于 commonjs 模块标准的模块代码。在这里的作用主要是加载 ployfill 模块。
$ npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs
在修改 gulpfile.js 文件如下:
const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs"); gulp.task("babel", () => {
return gulp.src("src/**/*.js")
.pipe(rollup({
plugins: [
commonjs(),
resolve(),
babel({
runtimeHelpers: true
})
]
},{
format: "iife"
}))
.pipe(gulp.dest("dist"))
}) gulp.task("watch", () => {
gulp.watch("src/**/*.js", gulp.series("babel"))
}) gulp.task("default", gulp.series(["babel", "watch"]))
使用 sourcemaps 和压缩
注意压缩使用 rollup-plugin-uglify 插件,为了提升打包速度,我们把模块文件放到 src/js/modules 文件夹下,将 gulp.src("src/js/.js") 改为 gulp.src("src/js/.js") 只打包主文件不打包依赖模块。
安装 gulp-sourcemaps 和 rollup-plugin-uglify 插件:
npm install --save-dev gulp-sourcemaps rollup-plugin-uglify
修改 gulpfile.js 文件如下:
const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");
const uglify = require("rollup-plugin-uglify");
const sourcemaps = require("gulp-sourcemaps"); gulp.task("babel", () => {
return gulp.src("src/js/*.js")
.pipe(sourcemaps.init())
.pipe(rollup({
plugins: [
commonjs(),
resolve(),
babel({
runtimeHelpers: true
}),
uglify.uglify()
]
},{
format: "iife"
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest("dist/js"))
}) gulp.task("watch", () => {
gulp.watch("src/**/*.js", gulp.series("babel"))
}) gulp.task("default", gulp.series(["babel", "watch"]))
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境的更多相关文章
- Gulp安装及配合组件构建前端开发一体化(转)
Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...
- 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- react学习笔记(一)用create-react-app构建 React 开发环境
React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...
- 【React】使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- 快速构建 React 开发环境
使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- 从源代码构建 Go 开发环境
从源代码构建 Go 开发环境 Go 1.5 之前的版本 安装C 语言开发环境 在Go 1.5 之前的版本(比如 1.3.1.4),都会部分的依赖 C 语言的工具链,所以如果你有C 语言的开发环境,就可 ...
- Python黑帽编程1.2 基于VS Code构建Python开发环境
Python黑帽编程1.2 基于VS Code构建Python开发环境 0.1 本系列教程说明 本系列教程,采用的大纲母本为<Understanding Network Hacks Atta ...
- 使用Intellij IDEA构建spark开发环境
近期开始研究学习spark,开发环境有多种,由于习惯使用STS的maven项目,但是按照许多资料的方法尝试以后并没有成功,也可能是我环境问题:也可以是用scala中自带的eclipse,但是不太习惯, ...
随机推荐
- recovery 升级前兼容性检查(Vendor Interface Object)
从android P(9.0)版本开始,我们发现编译出来的OTA升级了里面多了一个文件,compatibility.zip,这个里面存储这system与vendor分区的一些特性,用来做升级前的兼容性 ...
- python使用sax实现xml解析
之前在使用xml解析的时候,在网上搜了很多教程,最终没有能按照网上的教程实现需求. 所以呢,只好自己去看源码,在sax的__init__.py下看到这么一段代码: 1 def parse(source ...
- 【MM系列】SAP库龄报表逻辑理解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP库龄报表逻辑理解 第一篇 ...
- docker往阿里云推镜像和打包镜像
向仓库推镜像 1. 登录到阿里云docker镜像站点,然后创建仓库. 2.要按照阿里云官方给定的仓库名称来使用,所以我们一般都要继续给准备要上传的镜像二次添加标签,如下所示: 3.在终端登录阿里云站点 ...
- MySQL高级知识(十六)——小表驱动大表
前言:本来小表驱动大表的知识应该在前面就讲解的,但是由于之前并没有学习数据批量插入,因此将其放在这里.在查询的优化中永远小表驱动大表. 1.为什么要小表驱动大表呢 类似循环嵌套 for(int i=5 ...
- JZOJ 5602.【NOI2018模拟3.26】Cti
JZOJ 5602.[NOI2018模拟3.26]Cti Description 有一个 \(n×m\) 的地图,地图上的每一个位置可以是空地,炮塔或是敌人.你需要操纵炮塔消灭敌人. 对于每个炮塔都有 ...
- 如何给30台centos7服务器分别增加相同的用户
老大直接给了30台新鲜的生产服务器,要给每一台服务器增加一个用户,密码相同 难道我们要部署一个工具吗?这样对生产环境可能会产生影响,为了保证服务器的新鲜以及节约时间,研究了小半天,终于研究出一个不是很 ...
- jenkins中布置python测试
测试代码 #coding:utf- import unittest class MyTest(unittest.TestCase): # 继承unittest.TestCase def tearDow ...
- Python:Day09
Ubantu忘记密码: 1.开机长按shift,进入界面后按e: 2.将红框中内改成如下并按F10重启: 3.输入passwd,然后用户名,然后重新输入密码: locale命令查看系统中是否有中文 a ...
- 005_python对整数的拼接
一. (1)需要把整数组成的列表或整数字符串混合的列表拼接成字符串,实现如下: arr=[1,2,3,4,"5"] print ','.join(map(str,arr)) pri ...