10分でrollupに精通します.js——前置学習のrollup.jsプラグイン編

前言
本文は《10分快速精通rollup.js——Vue.jsソースコードパッケージ過程深さ分析》の前置学習教程で、説明した知識点はVueを理解する.jsパッケージソースをターゲットにして、あまり展開しません.チュートリアルはrollupを維持します.jsシリーズのチュートリアルの一貫したスタイルで、ほとんどの知識点は実行可能なコードケースと実際の実行結果を提供し、チュートリアルを通じて実現効果を見ることができ、自分でテストする時間を省くことができます.
このチュートリアルでは、buble、flow、terserモジュールの用途を理解する必要があります.まだ知らない仲間は、このチュートリアルを参照してください.
1.rollup-plugin-bubleプラグイン
Convert ES2015 with buble.
bubleプラグインの用途はrollupである.jsパッケージ化の過程でコードコンパイルを行い、ES 6+コードをES 2015標準にコンパイルし、まずプロジェクトにbubleプラグインを導入する.

npm i -D rollup-plugin-buble

変更./src/vue/buble/index.jsのソースコードは、次のように書き込まれます.

const a = 1 // ES6   ：const
let b = 2 // ES6   ：let
const c = () => a + b // ES6   ：    
console.log(a, b, c())

ロールを変更します.plugin.config.jsプロファイル:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import buble from 'rollup-plugin-buble'

export default {
  input: './src/vue/buble/index.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }],
  plugins: [
    resolve(),
    commonjs(),
    buble()
  ]
}

rollupを適用します.jsのコンパイル:

$ rollup -c rollup.plugin.config.js 
./src/vue/buble/index.js  ./dist/index-plugin-cjs.js...
created ./dist/index-plugin-cjs.js in 35ms

生成されたファイルの内容を表示するには、次の手順に従います.

$ cat dist/index-plugin-cjs.js 
'use strict';

var a = 1;
var b = 2;
var c = function () { return a + b; };
console.log(a, b, c());

nodeでパッケージ化されたコードを実行します.

$ node dist/index-plugin-cjs.js 
1 2 3

2.rollup-plugin-aliasプラグイン
Provide an alias for modules in Rollup
aliasプラグインはモジュールに別名を付ける機能を提供しています.webpackを使ったパートナーはこの機能をよく知っているはずです.まず、プロジェクトにaliasプラグインを導入します.

npm i -D rollup-plugin-alias

src/vue/aliasディレクトリを作成し、ローカルテストライブラリlibを作成します.jsとテストコードindex.js:

mkdir -p src/vue/alias
touch src/vue/alias/index.js
touch src/vue/alias/lib.js

lib.jsには以下の内容が書き込まれています.

export function square(n) {
  return n * n
}

indexでjsには以下の内容が書き込まれています.

import { square } from '@/vue/alias/lib' //     

console.log(square(2))

ロールを変更します.plugin.config.jsのプロファイル:

import alias from 'rollup-plugin-alias'
import path from 'path'

const pathResolve = p => path.resolve(__dirname, p)

export default {
  input: './src/vue/alias/index.js',
  output: [{
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    alias({
      '@': pathResolve('src')
    })
  ]
}

ここでは、絶対パスを生成するためのpathResolveメソッドを提供し、aliasプラグインを導入してパラメータとしてオブジェクトを入力します.オブジェクトのkeyはモジュールで使用される別名であり、オブジェクトのvalueは別名に対応する真のパスです.rollupを使用します.jsパッケージ化:

$ rollup -c rollup.plugin.config.js 

./src/vue/alias/index.js  ./dist/index-plugin-es.js...
created ./dist/index-plugin-es.js in 23ms

パッケージ化されたコードを表示すると、エイリアスに対応するパスが正しく認識されます.

$ cat dist/index-plugin-es.js 
function square(n) {
  return n * n
}

console.log(square(2));

3.rollup-plugin-flow-no-whitespaceプラグイン
flowプラグインはrollupに使用する.jsパッケージ中にflowタイプチェック部分のコードをクリアし、rollupを修正します.plugin.config.jsのinputプロパティ:

input: './src/vue/flow/index.js',

flowのコードを直接パッケージしてみます.

$ rollup -c rollup.plugin.config.js 

./src/vue/flow/index.js  ./dist/index-plugin-cjs.js...
[!] Error: Unexpected token
src/vue/flow/index.js (2:17)
1: /* @flow */
2: function square(n: number): number {
                    ^
3:   return n * n
4: }
Error: Unexpected token

rollupが見えます.jsは異常を投げ出します.この問題を解決するためにflowプラグインを導入します.

npm i -D rollup-plugin-flow-no-whitespace

プロファイルの変更:

import flow from 'rollup-plugin-flow-no-whitespace'

export default {
  input: './src/vue/flow/index.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }],
  plugins: [
    flow()
  ]
}

パッケージの再実行:

$ rollup -c rollup.plugin.config.js 
./src/vue/flow/index.js  ./dist/index-plugin-cjs.js...
created ./dist/index-plugin-cjs.js in 40ms

パッケージされたソースを表示するには、次の手順に従います.

$ cat ./dist/index-plugin-cjs.js 
'use strict';

/*  */
function square(n) {
  return n * n
}

console.log(square(2));

flowのコードが正常にクリアされたことがわかりますが、/* @flow */が/* */に変更されました.この問題はterserプラグインを使用して修復し、注釈を除去することができます.
4.rollup-plugin-replaceプラグイン
Replace content while bundling
replaceプラグインの目的は、パッケージ化時にコードの内容を動的に置き換えることです.まず、replaceプラグインを導入します.

npm i -D rollup-plugin-replace

src/vue/replaceフォルダとindexを作成します.jsテストファイル:

mkdir -p src/vue/replace
touch src/vue/replace/index.js

indexでjsファイルには以下の内容が書き込まれています.

const a = 1
let b = 2
if (__SAM__) { //   replace __SAM__，         ，         
  console.log(`__SAM__,${a},${b},${c}`) //   __SAM__，       
}

ロールを変更します.plugin.config.jsプロファイル:

import buble from 'rollup-plugin-buble'
import replace from 'rollup-plugin-replace'

export default {
  input: './src/vue/replace/index.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }],
  plugins: [
    replace({
      __SAM__: true
    }),
    buble()
  ]
}

replaceプラグインにオブジェクトを入力します.keyは__です.SAM__,valueはtrueです.だからjsパッケージ時に_SAM__trueに置き換えます.コードはES 6を使用しているので、bubleプラグインを導入してコンパイルする必要があります.パッケージコマンドを実行します.

$ rollup -c rollup.plugin.config.js 
./src/vue/replace/index.js  ./dist/index-plugin-cjs.js...
created ./dist/index-plugin-cjs.js in 28ms

パッケージ結果の表示:

$ cat dist/index-plugin-cjs.js 
'use strict';

var a = 1;
var b = 2;
{
  console.log(("true," + a + "," + b + "," + c));
}

が表示されますSAM__trueに正しく置き換えられます.WebStormエディタを使用している場合、flow構文を使用すると警告が表示されます.この場合、設定を開き、Languages&Frameworks>Javascriptに入り、Javascript language versionをFlowに変更する必要があります.それ以外に、__を使用SAM__警告も起こります.この問題を解決する方法はflow/testを開くことです.js,追加_SAM__のカスタム変数(declare var)を使用すると、警告が解消されます.

declare type Test = {
  a?: number; // a    number，    
  b?: string; // b    string，    
  c: (key: string) => boolean; // c    function，        ，   string，    boolean，  c    
}

declare var __SAM__: boolean; //        

5.rollup-plugin-terserプラグイン
Rollup plugin to minify generated es bundle
terserプラグインはrollupを助けてくれます.jsパッケージング中にコード圧縮を実現し、まずterserプラグインを導入する.

npm i -D rollup-plugin-terser

src/vue/replace/indexを変更します.jsのソースコード、ここでは総合的なテストをして、私たちが前に勉強したプラグインをすべて適用します.

/* @flow */
import { square } from '@/vue/alias/lib' //           
import { random } from 'sam-test-data' //   es  
import { a as cjsA } from 'sam-test-data-cjs' //   commonjs  

const a: number = 1 //   flow      
let b: number = 2 //   ES6   ：let
const c: string = '' //    ascii  
if (__SAM__) { //   replace   
  console.log(`__SAM__,${a},${b},${c}`) //   ES6   ``     
}
export default {
  a, b, c, d: __SAM__, square, random, cjsA
} //   ES  

上記のコードを使用して、次の機能を検証します.

replaceプラグイン:コード内の_SAM__正しく置き換えられます.

flowプラグイン:flowのタイプチェックコードを正しく削除します.

bubleプラグイン:ES 6+コードをES 2015にコンパイルする;

aliasプラグイン:モジュール内の'@'別名を'src'ディレクトリに置き換えます.

commonjsプラグイン:CommonJSモジュールをサポートする;

resovleプラグイン:外部モジュールコードをマージします.

terserプラグイン:コード最小化パッケージ.

ロールを変更します.plugin.config.jsプロファイル:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import buble from 'rollup-plugin-buble'
import replace from 'rollup-plugin-replace'
import flow from 'rollup-plugin-flow-no-whitespace'
import { terser } from 'rollup-plugin-terser'
import alias from 'rollup-plugin-alias'
import path from 'path'

const pathResolve = p => path.resolve(__dirname, p)

export default {
  input: './src/vue/replace/index.js',
  output: [{
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    replace({
      __SAM__: true
    }),
    flow(),
    buble(),
    alias({
      '@': pathResolve('src')
    }),
    commonjs(),
    resolve(),
    terser({
      output: {
        ascii_only: true //    ascii  
      },
      compress: {
        pure_funcs: ['console.log'] //   console.log  
      }
    }),
  ]
}

terserプラグインの構成方法はAPIモードとほぼ一致し、コードをパッケージ化する.

$ rollup -c rollup.plugin.config.js 
./src/vue/replace/index.js  ./dist/index-plugin-es.js...
created ./dist/index-plugin-es.js in 308ms

パッケージされたコードファイルを表示するには、次の手順に従います.

$ cat dist/index-plugin-es.js 
function square(a){return a*a}function random(a){return a&&a%1==0?Math.floor(Math.random()*a):0}var a$1=Math.floor(10*Math.random()),b$1=Math.floor(100*Math.random());function random$1(a){return a&&a%1==0?Math.floor(Math.random()*a):0}var _samTestDataCjs_0_0_1_samTestDataCjs={a:a$1,b:b$1,random:random$1},_samTestDataCjs_0_0_1_samTestDataCjs_1=_samTestDataCjs_0_0_1_samTestDataCjs.a,a$2=1,b$2=2,c="\ud83d\ude00",index={a:a$2,b:b$2,c:c,d:!0,square:square,random:random,cjsA:_samTestDataCjs_0_0_1_samTestDataCjs_1};export default index;

各プロパティがすべて有効になり、babel-nodeでコードを実行しようとしています.

$ babel-node 
> require('./dist/index-plugin-es')
{ default:
   { a: 1,
     b: 2,
     c: '',
     d: true,
     square: [Function: square],
     random: [Function: random],
     cjsA: 4 } }

コードが正常に実行され、パッケージングプロセスが成功したことを示します.
6.introとoutroの構成
introプロパティとoutroプロパティは、私たちが前に説明したbannerプロパティとfooterプロパティと似ており、コードにコメントを追加するために使用されています.では、この4つの属性の違いは何ですか?まずrollupについて理解します.js公式サイトはこの4つの属性について説明します.

intro:パッケージされたファイルのブロックの内部(wrapper内部)の最上部にコンテンツ

を挿入する

outro:パッケージされたファイルのブロックの内部(wrapper内部)の一番下に

を挿入する

banner:パッケージされたファイルのブロックの外部(wrapper外部)の最上部にコンテンツ

を挿入する

footer:パッケージされたファイルのブロックの外部(wrapper外部)の最下部に

を挿入する
簡単に言えばintroとoutroが追加する注釈はコードブロックの内部にあり、bannerとfooterは外部にあり、以下にsrc/plugin/mainを修正する例を挙げる.jsコード:

const a = 1
console.log(a)
export default a

ロールを変更します.config.jsの構成:

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-cjs.js',
    format: 'cjs',
    banner: '// this is banner',
    footer: '// this is footer',
    intro: '// this is a intro comment',
    outro: '// this is a outro comment',
  }]
}

パッケージコード:

$ rollup -c

./src/plugin/main.js  ./dist/index-cjs.js...
created ./dist/index-cjs.js in 11ms

出力結果:

$ cat dist/index-cjs.js 
// this is banner
'use strict';

// this is a intro comment

const a = 1;
console.log(a);

module.exports = a;

// this is a outro comment
// this is footer

bannerとfooterの注釈は最外層に見え、introとoutroの注釈は内層にあり、introの注釈は「use strict」の下にあるので、コードの最外層にmoduleのような要素を包む場合.exportsやexport defaultなどは、Vueでintroとoutroを使用する必要があります.jsソースコードパッケージではintroとoutroを使用してコードにモジュール化特性を追加します.また、introとoutro構成をpluginsに書き込む方法で、この機能を実現することもできます.

export default {
  input: './src/plugin/main.js',
  output: [{
    file: './dist/index-cjs.js',
    format: 'cjs',
    banner: '// this is banner',
    footer: '// this is footer'
  }],
  plugins: [
    {
      intro: '// this is a intro comment',
      outro: '// this is a outro comment'
    }
  ]
}

このプロファイルの結果は、以前と完全に一致しています.
まとめ
このチュートリアルでは、以下の点について説明します.

rollup-plugin-bubleプラグイン:ES 6+構文をコンパイルするのはES 2015で、構成する必要はなく、babelより軽量です.

rollup-plugin-aliasプラグイン:モジュールパスの別名を置き換えます.

rollup-plugin-flow-no-whitespaceプラグイン:flow静的タイプチェックコードを除去する;

rollup-plugin-replaceプラグイン:置換コードの変数は指定値です.

rollup-plugin-terserプラグイン:uglifyの代わりにコード圧縮、ESモジュールをサポートします.

introとoutro構成:コードブロックにコードコメントを追加します.

転載先:https://juejin.im/post/5bf823b96fb9a049e93c61a8