最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端工程化之Rollup構(gòu)建工具

本文轉(zhuǎn)載自微信公眾號「DYBOY」，作者DYBOY。轉(zhuǎn)載本文請聯(lián)系DYBOY公眾號。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號開發(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ā)是必然道路，百家爭名的時代，涌現(xiàn)了許多優(yōu)秀的構(gòu)建工具，今天想從學(xué)習(xí)的角度，和大家分享一下筆者的學(xué)習(xí)方法和思路。

筆者個人觀點看來，想要完全掌握前端工程化，那么就得對行業(yè)現(xiàn)有的構(gòu)建工具、流程管理、服務(wù)管理有一個全面以及深入的認(rèn)識，無論是前端還是后端開發(fā)者，我們通過任意編程語言編寫軟件應(yīng)用，這是基本能力，但作為工程師，我想那就是得具有工程化的能力，我們應(yīng)該在開發(fā)工程中能夠具有把控全局的能力，有業(yè)務(wù)上的視野，也得有技術(shù)上的沉淀，應(yīng)該時刻思考，從程序設(shè)計、流程設(shè)計、方案設(shè)計上盡可能得去逼近符合業(yè)務(wù)場景的最佳實踐。

一、什么是Rollup

Rollup 是一個 JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，例如 library 或應(yīng)用程序 —— Rollup文檔

可以理解為，Rollup是一款集成式的代碼打包、應(yīng)用構(gòu)建工具。

二、為什么要使用構(gòu)建工具

如前文所述，前端工程化是作為工程師的必要能力，工程化并非一個人就能搞定的，我們需要站在前人/巨人的肩膀看世界。

隨著行業(yè)的發(fā)展，涌現(xiàn)了一些獲得行業(yè)認(rèn)可(可以認(rèn)為是最佳實踐)的構(gòu)建工具，這些構(gòu)建工具將一些項目管理和編程開發(fā)的行業(yè)最佳實踐集成到了一個“腳手架”工具中。如此，便有利于其他團隊快速構(gòu)建出高效、高質(zhì)量的工程化項目。

構(gòu)建工具能做的事：

  • 處理兼容性
  • 混淆、壓縮代碼
  • Tree Shaking
  • 轉(zhuǎn)譯
  • 單元測試
  • 打包應(yīng)用

三、上手Rollup

Rollup是一個我認(rèn)為還比較簡單的構(gòu)建工具，此處先不去討論其深層次的構(gòu)建實現(xiàn)細(xì)節(jié)，先看看如何上手使用。

其實關(guān)于Rollup的使用還是比較推薦大家閱讀官方文檔：https://rollupjs.org/guide/

「3.1 安裝」

全局安裝roolup

 
 
 
 
    
  
  
  
  
  1. yarn add rollup -g 
    2.

「3.2 簡單使用」

使用rollup打包構(gòu)建有兩種方式，直接在命令行下需要手打構(gòu)建必須的參數(shù)，當(dāng)然我們是做工程，那么就得考慮如何盡可能減少團隊成員的上手成本。

為此，Rollup提供了通過文件化配置方式，預(yù)設(shè)所需的參數(shù)，同時通過更改配置文件的參數(shù)，可以自由地實現(xiàn)我們自定義的需求。

這里大家可能會想到寫一個CLI，工欲善其事必先利其器，咱先認(rèn)識工具才能造工具，就先不扯遠(yuǎn)了。

3.2.1 創(chuàng)建配置文件

在項目的根目錄或其他你滿意的位置創(chuàng)建一個 rollup.config.js 文件，其內(nèi)容主要如下：

 
 
 
 
    
  
  
  
  
  1. export default { 
    2. 
  
  
  
  
  2.     input: "./src/index.js", 
    3. 
  
  
  
  
  3.     output: { 
    4. 
  
  
  
  
  4.         file: "./dist/bundle.js", 
    5. 
  
  
  
  
  5.         format: "esm", 
    6. 
  
  
  
  
  6.         name: "RollupLearn", 
    7. 
  
  
  
  
  7.     }, 
    8. 
  
  
  
  
  8. } 
    9.

3.2.2 添加快捷命令

為了簡單，另外再在package.json中配置快捷命令：

 
 
 
 
    
  
  
  
  
  1. "scripts": { 
    2. 
  
  
  
  
  2.     "building": "rollup -c -w", 
    3. 
  
  
  
  
  3. }, 
    4.

這樣就可以直接在命令行下通過執(zhí)行：yarn building，就創(chuàng)建了一個實時監(jiān)聽文件變化就自動重新構(gòu)建打包的開發(fā)環(huán)境。

3.2.3 rollup.config.js配置常用參數(shù)解讀

官方羅列了rollup的配置參數(shù)如下：

 
 
 
 
    
  
  
  
  
  1. export default { 
    2. 
  
  
  
  
  2.   // 核心選項 
    3. 
  
  
  
  
  3.   input,     // 必須，打包的入口文件，常見index.js 
    4. 
  
  
  
  
  4.   external, 
    5. 
  
  
  
  
  5.   plugins,  // 常用：數(shù)組中配置一些打包的插件，例如babel等 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   // 額外選項 
    8. 
  
  
  
  
  8.   onwarn, 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.   // danger zone 
    11. 
  
  
  
  
  11.   acorn, 
    12. 
  
  
  
  
  12.   context, 
    13. 
  
  
  
  
  13.   moduleContext, 
    14. 
  
  
  
  
  14.   legacy 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.   output: {  // 必須 (如果要輸出多個，可以是一個數(shù)組) 
    17. 
  
  
  
  
  17.     // 核心選項 
    18. 
  
  
  
  
  18.     file,    // 必須，生成的打包文件名&路徑 
    19. 
  
  
  
  
  19.     format,  // 必須，打包構(gòu)建的目標(biāo)模塊標(biāo)準(zhǔn)，有cjs、amd、umd、esm、iife等 
    20. 
  
  
  
  
  20.     name, 
    21. 
  
  
  
  
  21.     globals, 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23.     // 額外選項 
    24. 
  
  
  
  
  24.     paths, 
    25. 
  
  
  
  
  25.     banner, 
    26. 
  
  
  
  
  26.     footer, 
    27. 
  
  
  
  
  27.     intro, 
    28. 
  
  
  
  
  28.     outro, 
    29. 
  
  
  
  
  29.     sourcemap,  // 常用，生成sourcemap文件 
    30. 
  
  
  
  
  30.     sourcemapFile, 
    31. 
  
  
  
  
  31.     interop, 
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33.     // 高危選項 
    34. 
  
  
  
  
  34.     exports, 
    35. 
  
  
  
  
  35.     amd, 
    36. 
  
  
  
  
  36.     indent 
    37. 
  
  
  
  
  37.     strict 
    38. 
  
  
  
  
  38.   }, 
    39. 
  
  
  
  
  39. }; 
    40.

簡單講一下幾個常用的功能設(shè)置

(1)輸入(input -i / --input)

String 這個包的入口點 (例如：你的 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)代瀏覽器中可以通過