资讯专栏INFORMATION COLUMN

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

XBaron / 846人阅读

摘要:地址构建基础的语法转译环境首先,安装工具,命令如下安装插件,由于需要作为依赖,因此,还要安装模块和和之间的无缝集成插件安装核心插件安装完成后,配置文件和文件,将这两个文件放在项目根目录下。

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"]))

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103977.html

相关文章

  • 使用rollup构建你的JavaScript项目【一】

    摘要:浏览器使用编译成一个自执行函数,可以直接在中的标签直接引入使用编译成模块浏览器和通用模式需要设置一个大报名使用配置文件,来一个项目开始之前,先在本地创建一个项目,并在根目录通过创建一个文件,构建一个用来管理依赖的项目。 什么是Rollup? 前端项目工程化构建工具也发展好几年了,生态演化,慢慢发展出了很多好的构建项目的工具,从最开始的grunt,gulp到webpack,前端的工程化越...

    meislzhua 评论0 收藏0
  • Javascript 打包工具

    摘要:所以,打包工具就出现了,它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具,,,,以发布时间为顺序。它定位是模块打包器,而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。 本文当时写在本地,发现换电脑很不是方便,在这里记录下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以锦上添花,不使用也没关系...

    Sleepy 评论0 收藏0
  • 前端构建工具整理

    摘要:常见前端构建工具的分类和对比是附带的包管理器,是内置的一个功能,允许在文件里面使用字段定义任务在这里,一个属性对应一段脚本,原理是通过调用去运行脚本命令。 前文 端技术范围不断发展,前端开发不仅限于直接编写html,css和javascript,Web应用日益庞大,代码也更加庞大,因此许多新的思想(例如模块化和工程化等)和框架(React和Vue等),以及新的语言(Es6 TypeSc...

    leo108 评论0 收藏0
  • 我他喵的到底要怎样才能在生产环境中用上 ES6 模块化?

    摘要:因此,你还是需要各种各样杂七杂八的工具来转换你的代码噢,我可去你妈的吧,这些东西都是干嘛的我就是想用个模块化,我到底该用啥子本文正旨在列出几种可用的在生产环境中放心使用模块化的方法,希望能帮到诸位后来者这方面的中文资源实在是忒少了。 原文发表在我的博客上。最近捣鼓了一下 ES6 的模块化,分享一些经验 :) Python3 已经发布了九年了,Python 社区却还在用 Python 2...

    KaltZK 评论0 收藏0
  • Javascript五十问——从源头细说Webpack与Gulp

    摘要:前言与是目前圈子内比较活跃的前端构建工具。对于初学者来说,对这二者往往容易认识不清,今天,就从事件的源头,说清楚与。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。打包后形成的文件出口。 前言:Webpack 与 gulp是目前圈子内比较活跃的前端构建工具。网上有很多二者比较的文章,面试中也会经常遇到gulp,Webpack的区别这样的问题。对于初学者来说,对这二...

    lwx12525 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<