<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    2. 

    <del id="afajh"><form id="afajh"></form></del>
    

    5. 

        1. <th id="afajh"><progress id="afajh"></progress></th>

          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>
          NPM 組件你應(yīng)該知道的事
          共
                3073字，需瀏覽
                    7分鐘
                
           ·
          2020-09-27 17:32
          
                    

                    

                    
                    
                    
          開發(fā)一個(gè) npm 組件， 你是否了解需要對(duì)外導(dǎo)出什么格式的代碼？如何讓 npm 組件體積盡可能小？
          整篇文章按照如下目錄進(jìn)行講解：
          • 為何需要打包
          • 組件打包輸出格式
          • 如何打包 esm 模式代碼（感興趣選讀）
          • 減少組件打包體積的最佳實(shí)踐
          為何需要打包 
          首先，這里的打包概念解釋一下， 只要有輸出到新目錄，就稱為打包（免得大家對(duì)打包理解概念不一致）。
          • 一份代碼，多種消費(fèi)方式
          • 使用新特性語(yǔ)法，由于一般項(xiàng)目中，會(huì)默認(rèn)不對(duì) node_module 中的庫(kù)進(jìn)行編譯以提高整個(gè)項(xiàng)目的編譯速度，所以作為 npm 包，要轉(zhuǎn)換成 es5 ，免得消費(fèi)方吐槽……
          打包格式 
          按照目前主流的模塊系統(tǒng)來(lái)區(qū)分，可以先看一張圖片宏觀了解一下：
          esm
          如果是用 npm 組件來(lái)使用， 都推薦使用這種導(dǎo)出模式。
          產(chǎn)生方式：
          • rollup 聲明 target 為 esm 或者 babel 編譯之后生成一個(gè)新的目錄 （iceworks 的做法）
          • package.json 中聲明 module，指向 esm
          使用方式：