<sub id="gqw76"><listing id="gqw76"></listing></sub>
      <sub id="gqw76"><listing id="gqw76"></listing></sub>

    1. <form id="gqw76"><legend id="gqw76"></legend></form>
    2. 實用程序包utils - 基于Rollup打包輸出各模塊文件(二)

      上一次,我們講到了如何去搭建一個前端工具庫的工程,那么今天我們來聊一聊如何去將其打包輸出。

      需求

      事情是這個樣子的。我有一個這樣的需求,或者是我發現有這么一個需求。就是有時候吧,我也不想搞的那么復雜,我就想寫一個簡簡單單的demo,引入一個JS腳本,CTRL + S一按,瀏覽器一打開,啪的一下,我就能看見效果,我就能爽起來,我不想npm init 、npm install這種去搞一個規范的工程,我就想回到遠古時代,感受最純真的愛。再比如后端的同學或者測試的同學,我不想知道npm是什么,我也不想去搞什么前端工程化,我就想像在學校老師教我的那樣,引入一個JS腳本,啪地一下能出效果,就像layui、jquery那樣,引入相關的腳本,it works。

      好,今天圍繞著樓上這個問題,我們去思考上一次工程化留下來的問題。 ------ 怎么將開發的模塊打包輸出?

      JS中的模塊規范

      隨著時代的發展,社會的進步。為了更好地解決代碼的沖突和依賴等問題,JS的模塊也經歷了很大的發展。比如寫服務端Node.js同學熟悉的CommonJS規范,以及專為瀏覽器設計的AMD(Asynchronous Module Definition)規范,還有它們的結合體UMD(Universal Module Definition)規范,還有2015年推出的ES Module規范。這里具體的示例我們放到后面再講。

      Rollup介紹

      Rollup是一個Javascript的模塊打包器,它可以做這樣一件事,將一大串代碼打包成一個模塊文件,這個模塊可以是我們上面提到的模塊規范,比如著名的Vue.js框架就是使用了rollup進行打包相關的文件輸出。

      如何在項目中運用rollup

      這里我主要是用了這5個主要的輔助包

      執行相關命令npm install package name即可,歐,不要忘了安裝rollup本包

      @rollup/plugin-json

      這個插件主要是將JSON文件轉換為ES Module

      https://github.com/rollup/plugins/tree/master/packages/json

      rollup-plugin-babel

      我們知道babel是JS的一個語法編譯器,有了它,或者說加上它的一些插件(比如說墊片),你可以在一些低版本或者不支持ES高級語法的環境下使用它

      https://github.com/rollup/plugins/tree/master/packages/babel

      rollup-plugin-terser

      可能我們生成的代碼體積很大,用這個插件可以有效地減小我們輸出包的體積

      https://github.com/trysound/rollup-plugin-terser

      @rollup/plugin-commonjs

      這個插件就是將commonJS的語法轉化成ES Module的

      https://github.com/rollup/plugins/blob/master/packages/commonjs

      @rollup/plugin-node-resolve

      這個是處理npm包的相關引入依賴的

      https://github.com/rollup/plugins/tree/master/packages/node-resolve

      下面是我的utils項目的一份配置文件rollup.config.js

      import json from '@rollup/plugin-json';
      import babel from 'rollup-plugin-babel';
      import { terser } from 'rollup-plugin-terser';
      import commonjs from '@rollup/plugin-commonjs';
      import resolve from '@rollup/plugin-node-resolve';
      
      import pkg from './package.json';
      
      const banner =
        '/*!\n' +
        ` * ataola-utils.js v${pkg.version}\n` +
        ` * (c) 2021-${new Date().getFullYear()} ataola(Jiangtao Zheng)\n` +
        ' * Released under the MIT License.\n' +
        ' */';
      
      export default [
        // browser-friendly UMD build
        {
          input: 'index.js',
          output: {
            name: 'ataola-utils',
            file: pkg.browser,
            format: 'umd',
            sourcemap: true,
            banner,
          },
          plugins: [
            json({
              compact: true,
            }),
            resolve(),
            commonjs(),
            babel({
              exclude: 'node_modules/**',
              runtimeHelpers: true,
              presets: ['@babel/preset-env'],
              plugins: [
                [
                  '@babel/plugin-transform-runtime',
                  { useESModules: true /**, corejs: 3  */ },
                ],
              ],
            }),
          ],
        },
        {
          input: 'index.js',
          output: [
            { file: pkg.main, format: 'cjs', banner, sourcemap: true },
            { file: pkg.module, format: 'esm', banner, sourcemap: true },
            {
              name: 'ataola-utils',
              file: 'dist/ataola-utils.amd.js',
              format: 'amd',
              extend: true,
              sourcemap: true,
              banner,
            },
            {
              name: 'ataola-utils',
              file: 'dist/ataola-utils.js',
              format: 'iife',
              extend: true,
              sourcemap: true,
              banner,
            },
            {
              name: 'ataola-utils',
              file: 'dist/ataola-utils.min.js',
              format: 'iife',
              extend: true,
              banner,
              sourcemap: true,
              plugins: [terser()],
            },
          ],
          plugins: [
            json({
              compact: true,
            }),
            resolve(),
            commonjs(),
            babel({
              // https://github.com/rollup/rollup-plugin-babel#configuring-babel
              exclude: 'node_modules/**',
              runtimeHelpers: true,
              presets: ['@babel/preset-env'],
              plugins: [
                [
                  '@babel/plugin-transform-runtime',
                  { useESModules: true /**, corejs: 3  */ },
                ],
              ],
            }),
          ],
        },
      ];
      
      

      https://github.com/ataola/utils/blob/main/rollup.config.js

      樓上的配置項通俗易懂,字面意思就是它的意思,就不過多解釋了。這里我輸出的是一個數組,其實也可以是個對象,然后我們在output上面去配置輸出的格式,這個根據項目可以靈活配置的。主要是配置了打包輸出umd、amd、commonjs、esmodule以及IIFE(Immediately Invoked Function Expression)立即調用函數表達式

      打包出來的文件怎么使用

      AMD

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ataola utils</title>
      </head>
      <body>
        
      </body>
      <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
      <script>
      requirejs(["https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.amd.js"], function(ataola) {
         console.log(ataola)
         console.log(ataola.getVersion())
      });
      </script>
      </html>
      

      https://zhengjiangtao.cn/show/zj/ataola-utils-amd.html

      UMD

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ataola utils</title>
      </head>
      <body>
        
      </body>
      <script src="https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.umd.js"></script>
      <script>
        const ataola = this['ataola-utils'];
        console.log(ataola);
        console.log(ataola.getVersion());
      </script>
      </html>
      

      https://zhengjiangtao.cn/show/zj/ataola-utils-umd.html

      IIFE

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ataola utils</title>
      </head>
      <body>
        
      </body>
      <script src="https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.min.js"></script>
      <script>
        // https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.js
        // https://cdn.jsdelivr.net/npm/@ataola/utils@0.1.10/dist/ataola-utils.js
        // use this['ataola-utils'] || window['ataola-utils']
        const ataola = this['ataola-utils'];
        console.log(ataola);
        console.log(ataola.getVersion());
      </script>
      </html>
      

      https://zhengjiangtao.cn/show/zj/ataola-utils.html

      ES Module

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>utils unpkg</title>
      </head>
      <body>
        
      </body>
      <script type="module">
      import * as ataola from 'https://unpkg.com/@ataola/utils@0.1.10/dist/ataola-utils.esm.js';
      
      console.log(ataola);
      </script>
      </html>
      

      https://zhengjiangtao.cn/show/zj/ataola-utils-esm.html

      ComonJS

      這里AMD相關的引入需要你先引入require.js的支持,如果是commonJS模塊的話,需要用seajs,我試了下不是很好使,我放棄了別打我,建議直接在node.js環境下引入,如樓上

      參考文獻

      Rollup官方文檔:https://rollupjs.org/guide/zh/

      Rollup插件庫: https://github.com/rollup/plugins

      IIFE: https://developer.mozilla.org/zh-CN/docs/Glossary/IIFE

      posted @ 2021-06-07 00:15  ataola  閱讀(438)  評論(0編輯  收藏  舉報
      最新chease0ldman老人|无码亚洲人妻下载|大香蕉在线看好吊妞视频这里有精品www|亚洲色情综合网

        <sub id="gqw76"><listing id="gqw76"></listing></sub>
        <sub id="gqw76"><listing id="gqw76"></listing></sub>

      1. <form id="gqw76"><legend id="gqw76"></legend></form>