摘要:地址構(gòu)建基礎(chǔ)的語法轉(zhuǎn)譯環(huán)境首先,安裝工具,命令如下安裝插件,由于需要作為依賴,因此,還要安裝模塊和和之間的無縫集成插件安裝核心插件安裝完成后,配置文件和文件,將這兩個文件放在項目根目錄下。
gulp + gulp-better-rollup + rollup 構(gòu)建 ES6 開發(fā)環(huán)境
關(guān)于 Gulp 就不過多啰嗦了。常用的 js 模塊打包工具主要有 webpack、rollup 和 browserify 三個,Gulp 構(gòu)建 ES6 開發(fā)環(huán)境通常需要借助這三者之一來合并打包 ES6 模塊代碼。因此,Gulp 構(gòu)建 ES6 開發(fā)環(huán)境的方案有很多,例如:webpack-stream、rollup-stream 、browserify等,本文講述使用 gulp-better-rollup 的構(gòu)建過程。gulp-better-rollup 可以將 rollup 更深入地集成到Gulps管道鏈中。
GitHub地址:https://github.com/JofunLiang/gulp-translation-es6-demo
構(gòu)建基礎(chǔ)的 ES6 語法轉(zhuǎn)譯環(huán)境首先,安裝 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 文件,然后運(yùn)行 gulp 默認(rèn)任務(wù),檢查 dist 下的文件是否編譯成功。
使用 ployfill 兼容經(jīng)過上面的構(gòu)建過程,成功將 ES6 語法轉(zhuǎn)譯為 ES5 語法,但也僅僅是轉(zhuǎn)換的語法,新的 api(如:Set、Map、Promise等) 并沒有被轉(zhuǎn)譯。關(guān)于 ployfill 兼容可以直接在頁面中引入 ployfill.js 或 ployfill.min.js 文件實現(xiàn),這種方式比較簡單,本文不再贅述,下面講下在構(gòu)建中的實現(xiàn)方式。
安裝 @babel/plugin-transform-runtime 、@babel/runtime-corejs2 和 core-js@2(注意:core-js的版本要和@babel/runtime的版本對應(yīng),如:@babel/runtime-corejs2對應(yīng)core-js@2)。@babel/plugin-transform-runtime 的作用主要是避免污染全局變量和編譯輸出中的重復(fù)。@babel/runtime(此處指@babel/runtime-corejs2)實現(xiàn)運(yùn)行時編譯到您的構(gòu)建中。
$ 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 模塊標(biāo)準(zhǔn)的模塊代碼。在這里的作用主要是加載 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"]))
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/103977.html
摘要:瀏覽器使用編譯成一個自執(zhí)行函數(shù),可以直接在中的標(biāo)簽直接引入使用編譯成模塊瀏覽器和通用模式需要設(shè)置一個大報名使用配置文件,來一個項目開始之前,先在本地創(chuàng)建一個項目,并在根目錄通過創(chuàng)建一個文件,構(gòu)建一個用來管理依賴的項目。 什么是Rollup? 前端項目工程化構(gòu)建工具也發(fā)展好幾年了,生態(tài)演化,慢慢發(fā)展出了很多好的構(gòu)建項目的工具,從最開始的grunt,gulp到webpack,前端的工程化越...
摘要:所以,打包工具就出現(xiàn)了,它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具,,,,以發(fā)布時間為順序。它定位是模塊打包器,而屬于構(gòu)建工具。而且在其他的打包工具在處理非網(wǎng)頁文件比如等基本還是需要借助它來實現(xiàn)。 本文當(dāng)時寫在本地,發(fā)現(xiàn)換電腦很不是方便,在這里記錄下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以錦上添花,不使用也沒關(guān)系...
摘要:常見前端構(gòu)建工具的分類和對比是附帶的包管理器,是內(nèi)置的一個功能,允許在文件里面使用字段定義任務(wù)在這里,一個屬性對應(yīng)一段腳本,原理是通過調(diào)用去運(yùn)行腳本命令。 前文 端技術(shù)范圍不斷發(fā)展,前端開發(fā)不僅限于直接編寫html,css和javascript,Web應(yīng)用日益龐大,代碼也更加龐大,因此許多新的思想(例如模塊化和工程化等)和框架(React和Vue等),以及新的語言(Es6 TypeSc...
摘要:因此,你還是需要各種各樣雜七雜八的工具來轉(zhuǎn)換你的代碼噢,我可去你媽的吧,這些東西都是干嘛的我就是想用個模塊化,我到底該用啥子本文正旨在列出幾種可用的在生產(chǎn)環(huán)境中放心使用模塊化的方法,希望能幫到諸位后來者這方面的中文資源實在是忒少了。 原文發(fā)表在我的博客上。最近搗鼓了一下 ES6 的模塊化,分享一些經(jīng)驗 :) Python3 已經(jīng)發(fā)布了九年了,Python 社區(qū)卻還在用 Python 2...
摘要:前言與是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。對于初學(xué)者來說,對這二者往往容易認(rèn)識不清,今天,就從事件的源頭,說清楚與。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。打包后形成的文件出口。 前言:Webpack 與 gulp是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。網(wǎng)上有很多二者比較的文章,面試中也會經(jīng)常遇到gulp,Webpack的區(qū)別這樣的問題。對于初學(xué)者來說,對這二...
閱讀 1537·2021-11-24 10:17
閱讀 1031·2021-09-29 09:43
閱讀 2165·2021-09-23 11:21
閱讀 2160·2019-08-30 14:13
閱讀 1295·2019-08-29 13:58
閱讀 3157·2019-08-28 17:51
閱讀 1803·2019-08-26 13:29
閱讀 2973·2019-08-26 10:13