建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號(hào)「DYBOY」，作者DYBOY。轉(zhuǎn)載本文請(qǐng)聯(lián)系DYBOY公眾號(hào)。
我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、德興ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的德興網(wǎng)站制作公司
隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，前端應(yīng)用也逐漸變得復(fù)雜，所以自然而然地前端工程化開發(fā)是必然道路，百家爭(zhēng)名的時(shí)代，涌現(xiàn)了許多優(yōu)秀的構(gòu)建工具，今天想從學(xué)習(xí)的角度，和大家分享一下筆者的學(xué)習(xí)方法和思路。
筆者個(gè)人觀點(diǎn)看來，想要完全掌握前端工程化，那么就得對(duì)行業(yè)現(xiàn)有的構(gòu)建工具、流程管理、服務(wù)管理有一個(gè)全面以及深入的認(rèn)識(shí)，無論是前端還是后端開發(fā)者，我們通過任意編程語(yǔ)言編寫軟件應(yīng)用，這是基本能力，但作為工程師，我想那就是得具有工程化的能力，我們應(yīng)該在開發(fā)工程中能夠具有把控全局的能力，有業(yè)務(wù)上的視野，也得有技術(shù)上的沉淀，應(yīng)該時(shí)刻思考，從程序設(shè)計(jì)、流程設(shè)計(jì)、方案設(shè)計(jì)上盡可能得去逼近符合業(yè)務(wù)場(chǎng)景的最佳實(shí)踐。
一、什么是Rollup
Rollup 是一個(gè) JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，例如 library 或應(yīng)用程序 —— Rollup文檔
可以理解為，Rollup是一款集成式的代碼打包、應(yīng)用構(gòu)建工具。
二、為什么要使用構(gòu)建工具
如前文所述，前端工程化是作為工程師的必要能力，工程化并非一個(gè)人就能搞定的，我們需要站在前人/巨人的肩膀看世界。
隨著行業(yè)的發(fā)展，涌現(xiàn)了一些獲得行業(yè)認(rèn)可(可以認(rèn)為是最佳實(shí)踐)的構(gòu)建工具，這些構(gòu)建工具將一些項(xiàng)目管理和編程開發(fā)的行業(yè)最佳實(shí)踐集成到了一個(gè)“腳手架”工具中。如此，便有利于其他團(tuán)隊(duì)快速構(gòu)建出高效、高質(zhì)量的工程化項(xiàng)目。
構(gòu)建工具能做的事：
- 處理兼容性
- 混淆、壓縮代碼
- Tree Shaking
- 轉(zhuǎn)譯
- 單元測(cè)試
- 打包應(yīng)用
三、上手Rollup
Rollup是一個(gè)我認(rèn)為還比較簡(jiǎn)單的構(gòu)建工具，此處先不去討論其深層次的構(gòu)建實(shí)現(xiàn)細(xì)節(jié)，先看看如何上手使用。
其實(shí)關(guān)于Rollup的使用還是比較推薦大家閱讀官方文檔：https://rollupjs.org/guide/
「3.1 安裝」
全局安裝roolup
- yarn add rollup -g
「3.2 簡(jiǎn)單使用」
使用rollup打包構(gòu)建有兩種方式，直接在命令行下需要手打構(gòu)建必須的參數(shù)，當(dāng)然我們是做工程，那么就得考慮如何盡可能減少團(tuán)隊(duì)成員的上手成本。
為此，Rollup提供了通過文件化配置方式，預(yù)設(shè)所需的參數(shù)，同時(shí)通過更改配置文件的參數(shù)，可以自由地實(shí)現(xiàn)我們自定義的需求。
這里大家可能會(huì)想到寫一個(gè)CLI，工欲善其事必先利其器，咱先認(rèn)識(shí)工具才能造工具，就先不扯遠(yuǎn)了。
3.2.1 創(chuàng)建配置文件
在項(xiàng)目的根目錄或其他你滿意的位置創(chuàng)建一個(gè) rollup.config.js 文件，其內(nèi)容主要如下：
- export default {
- input: "./src/index.js",
- output: {
- file: "./dist/bundle.js",
- format: "esm",
- name: "RollupLearn",
- },
- }
3.2.2 添加快捷命令
為了簡(jiǎn)單，另外再在package.json中配置快捷命令：
- "scripts": {
- "building": "rollup -c -w",
- },
這樣就可以直接在命令行下通過執(zhí)行：yarn building，就創(chuàng)建了一個(gè)實(shí)時(shí)監(jiān)聽文件變化就自動(dòng)重新構(gòu)建打包的開發(fā)環(huán)境。
3.2.3 rollup.config.js配置常用參數(shù)解讀
官方羅列了rollup的配置參數(shù)如下：
- export default {
- // 核心選項(xiàng)
- input, // 必須，打包的入口文件，常見index.js
- external,
- plugins, // 常用：數(shù)組中配置一些打包的插件，例如babel等
- // 額外選項(xiàng)
- onwarn,
- // danger zone
- acorn,
- context,
- moduleContext,
- legacy
- output: { // 必須 (如果要輸出多個(gè)，可以是一個(gè)數(shù)組)
- // 核心選項(xiàng)
- file, // 必須，生成的打包文件名&路徑
- format, // 必須，打包構(gòu)建的目標(biāo)模塊標(biāo)準(zhǔn)，有cjs、amd、umd、esm、iife等
- name,
- globals,
- // 額外選項(xiàng)
- paths,
- banner,
- footer,
- intro,
- outro,
- sourcemap, // 常用，生成sourcemap文件
- sourcemapFile,
- interop,
- // 高危選項(xiàng)
- exports,
- amd,
- indent
- strict
- },
- };
簡(jiǎn)單講一下幾個(gè)常用的功能設(shè)置
(1)輸入(input -i / --input)
String 這個(gè)包的入口點(diǎn) (例如：你的 main.js 或者 app.js 或者 index.js)
(2)文件(file -o / --output.file)
String 要寫入的文件。也可用于生成 sourcemaps，如果適用
(3)格式(format -f / --output.format)
String 生成包的格式。下列之一:
- amd – 異步模塊定義，用于像RequireJS這樣的模塊加載器
- cjs – CommonJS，適用于 Node 和 Browserify/Webpack
- esm – 將軟件包保存為 ES 模塊文件，在現(xiàn)代瀏覽器中可以通過
- amd – 異步模塊定義，用于像RequireJS這樣的模塊加載器
- cjs – CommonJS，適用于 Node 和 Browserify/Webpack
- esm – 將軟件包保存為 ES 模塊文件，在現(xiàn)代瀏覽器中可以通過