rollup配置及使用

淺夏晴空發表於2021-12-26

前言

業務線長期的積累產生了許許多多重複性的工具方法，業務功能模組等， 我們正好可以用 rollup 構建一個 npm 私服工具包，便於後期業務使用，減少重複性的程式碼編寫。

專案配置

babel

引入依賴

首先執行以下命令安裝babel相關：

yarn add @babel/core @babel/cli @babel/preset-env -D

配置babel.config.js

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: "> 0.25%, not dead"
            }
        ]
    ]
};

搭配@babel/plugin-transform-runtime和core-js：

yarn add core-js @babel/runtime
yarn add @babel/plugin-transform-runtime -D

修改babel.config.js如下：

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: "> 0.25%, not dead",
                useBuiltIns: "usage",
                corejs: "3.6.5"
            }
        ]
    ],
    plugins: ["@babel/plugin-transform-runtime"]
};

增加 npm scripts

"scripts:" {
  "babel": "babel ./src/index.js -o ./dist/index.js"
}

Typescript

面向未來，所以這裡引入typescript，統一用 ts 進行開發

yarn add typescript@4.3.5 -D
yarn add @babel/preset-typescript -D

修改babel配置如下：

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: '> 0.25%, not dead',
                useBuiltIns: 'usage',
                corejs: '3.6.5'
            },
            '@babel/preset-typescript'
        ]
    ],
    plugins: ['@babel/plugin-transform-runtime']
};

rollup

專案是純粹的Javascript專案，沒有vue、react相關的業務性程式碼，所以使用 rollup 進行打包。

引入依賴

yarn add rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-typescript2 tslib -D

配置rollup.config.js

import babel from '@rollup/plugin-babel'; // 引入babel
import commonjs from '@rollup/plugin-commonjs'; // 引入cjs外掛
import { nodeResolve } from '@rollup/plugin-node-resolve'; // 引入resolve
import typescript from 'rollup-plugin-typescript2'; // ts
import { terser } from 'rollup-plugin-terser'; // 壓縮打包檔案

const extensions = ['.js', '.ts'];

const pkg = require('./package.json'); // 從package.json引入

const version = pkg.version; // 專案版本
const license = pkg.license; // 協議
const author = pkg.author; // 作者

// 打包檔案的頭部宣告
const banner =
    '/*!\n' +
    ` * ${pkg.name} v${version}\n` +
    ` * (c) 2020-${new Date().getFullYear()} ${author}\n` +
    ` * Released under the ${license} License.\n` +
    ' */';

module.exports = {
    input: 'src/index.ts',
    output: [
        // 檔案輸出配置
        {
            file: 'dist/index.umd.js', // 打包後生產的檔案位置，及檔名
            format: 'umd',
            name: 'utools', // 包的全域性變數名稱
            banner
        },
        {
            file: 'dist/index.esm.js', // 打包後生產的檔案位置，及檔名
            format: 'esm',
            name: 'utools', // 包的全域性變數名稱
            banner
        }
    ],
    plugins: [
        nodeResolve({
            extensions,
            modulesOnly: true
        }),
        commonjs(),
        typescript(),
        babel({
            babelHelpers: 'runtime',
            include: 'src/**',
            exclude: 'node_modules/**',
            extensions
        }),
        terser()
    ]
};

增加 npm scripts

"scripts:" {
  "build": "rollup -c"
}

Jest

引入依賴

正好引入單元測試，便於專案後續迭代維護

yarn add jest@27.0.2  jest-globals ts-jest@27.0.2 @types/jest babel-jest@27.0.2 -D

配置jest.config.js

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
    transform: {
        '^.+\\.jsx?$': 'babel-jest', // 這個是jest的預設配置
        '^.+\\.ts?$': 'ts-jest' // typescript轉換
    }
};

增加 npm scripts

"scripts:" {
  "test": "jest"
}

Eslint+commitlint

這裡使用的部門內部規範化校驗工具，直接進行整體的規範化校驗，所以不再過多贅述，推薦參考 eslint-config-alloy https://github.com/AlloyTeam/eslint-config-alloy

其他配置

rimraf

這裡引入了 rimraf，再每次打包前，將原有的 dist 目錄下檔案刪除

修改 npm scripts

"build": "rimraf dist/* && rollup -c"

release-it

這裡引入了release-it，便於我們快速的進行 npm 釋出

安裝依賴

yarn add release-it -D

新增.release-it.json檔案

{
    "git": {
        "commitMessage": "chore: release v${version}"
    },
    "npm": {
        "publish": false
    },
    "publishConfig": {
        "registry": "私服地址"
    }
}

新增 npm scripts

"scripts:" {
  "release": "release-it",
}

package.json 如下

{
    "name": "module name",
    "version": "module version",
    "description": "module desc",
    "main": "dist/index.umd.js",
    "types": "types/index.d.ts",
    "module": "dist/index.esm.js",
    "scripts": {
        "test": "jest",
        "babel": "babel ./src/index.js -o ./dist/index.js",
        "build": "rimraf dist/* && rollup -c",
        "release": "release-it",
        "release:beta": "release-it major --preRelease=beta",
        "fix:src": "npx eslint src --fix --ext .ts",
        "fix:test": "npx eslint test --fix --ext .js",
        "lint": "npm run fix:src && npm run fix:test"
    },
    "repository": {
        "type": "git"
    },
    "author": "module author",
    "license": "MIT",
    "devDependencies": {},
    "dependencies": {}
}

相關文章