ロールアップパッケージ化されたVueコンポーネントライブラリ

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して3日目です。クリックしてイベントの詳細を表示。

ロールアップパッケージ

この章の目的はストーリーブックフレームワークに基づくコンポーネントプロジェクトが公開されました。

プロジェクトをリリースする前に、プロジェクトをパッケージ化する必要もあります。ここでは、 Rolluppackage。

Rollupパッケージを使用する理由

• Rollupこれはモジュールパッケージャーであり、webpack同様の、多くのオープンソースライブラリとフレームワークがRollupパッケージングを使用しています
• RollupTree-shakingオープンソースの静的分析コードimportで、使用されていないコードを除外することを サポートします
  • webpackサポートされていますが、手動で構成する必要があります
• パッケージ化された結果webpackは
• フレームワーク/コンポーネントライブラリを開発するときに使用するRollup方が

参考記事：ロールアップパッケージツールの使用（コードのスクリーンショットを使用して、非常に詳細、非常に基本的、非常に単純）

依存関係をインストールする

Rollupパッケージ化に使用する必要があるため、彼のすべての依存関係をインストールする必要があります

• Rollup

• rollup-plugin-terser：コードを圧縮する

• [email protected]：単一ファイルのコンポーネントをjsコードにコンパイルします。

  • なぜバージョンを指定するのですか？彼の最新のコンポーネントはVue3用であり、私の現在のコードはVue2用であるためです。

• vue-template-compiler：タイrollup-plugin-vueインジョブの作成

yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
复制代码

Rollup構成ファイル

依存関係をインストールした後Rollup、構成ファイルを構成する必要があります。ここでは、最初buttonにの、次にすべてのコンポーネントのパッケージを示します。

button包装

まずbutton、rollup.config.jsフォルダにファイルを作成します

ファイル構造

構成内容

import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'


import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'

module.exports = [
  {
    input: 'index.js',
    output: [
      {
        file: 'dist/index.js',
        format: 'es'
      }
    ],
    plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true, 
        // Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]
复制代码

この構成ファイルwebpackも非常によく似ており、個別に構成しました。

• エントリ（入力）
• エクスポート（出力）
• プラグイン

パック

次に、フォルダ内のbuttonファイルpackage.jsonます

"scripts": {
    // 添加
    "build": "rollup -c",
  },
复制代码

スクリプトの実行この時点で、スクリプトの実行は完了していますが、！問題は、多くのフォルダを持つコンポーネントがたくさんあり、ボタンのように1つずつパッケージ化できないことです。では、どうすればよいでしょうか。？？

すべてのコンポーネントをパッケージ化する

ここで、さらにいくつかの依存関係ファイルを追加する必要があります。

• plugin-json：構成ファイルで使用するjsonファイルをロールアップでロードすることができます
• rollup-plugin-postcss:( rollup-plugin-postcssは、インポートを減らすための2つのソリューションをサポートしていません）[juejin.cn/post/692083…]
• plugin-node-resolve：依存するサードパーティパッケージを

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
复制代码

構成ファイル

プロジェクトのルートディレクトリにrollup.config.jsを作成します

import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'

const isDev = process.env.NODE_ENV !== 'production'

// 公共插件配置
const plugins = [
  vue({
    // Dynamically inject css as a <style> tag
    css: true,
    // Explicitly convert template to render function
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // 把 css 插入到 style 中
    // inject: true,
    // 把 css 放到和js同一目录
    extract: true
  })
]

// 如果不是开发环境，开启压缩
isDev || plugins.push(terser())

// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // 过滤，只保留文件夹
  .filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
  // 为每一个文件夹创建对应的配置
  .map(item => {
    const pkg = require(path.resolve(root, item, 'package.json'))
    return {
      input: path.resolve(root, item, 'index.js'),
      output: [
        {
          exports: 'auto',
          file: path.resolve(root, item, pkg.main),
          format: 'cjs'
        },
        {
          exports: 'auto',
          file: path.join(root, item, pkg.module),
          format: 'es'
        },
      ],
      plugins: plugins
    }
  })
复制代码

ルートディレクトリのpackage.jsonでスクリプトを構成します

"build": "rollup -c"
复制代码

各パッケージのpackage.jsonにメインフィールドとモジュールフィールドを設定します

"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
复制代码

この時点で、構成は終了です。