rollup 開發環境搭建

開水泡飯的部落格發表於2021-08-16
開發環境

rollup 開發環境搭建

image-20210815222527524

初始化專案使用lerna管理專案

使用npm init 初始化專案

npm init -y

安裝lerna並初始化專案

npm install lerna --save-dev
# npx 使用node_modules 中的包
npx lerna init

現在已經生成了下面目錄結構

two-ui
└───node_modules
└───packages
│		lerna.json
│		package.json

安裝rollup並建立rollup.config.js檔案

npm install rollup --save-dev
touch rollup.config.js
# vscode 開啟rollup配置檔案
code rollup.config.js

安裝下面外掛

包名 作用
rollup-plugin-commonjs 將CommonJS模組轉換為ES6
@rollup/plugin-node-resolve 在node_模組中查詢並繫結第三方依賴項
@rollup/plugin-json 將json 檔案轉換為ES6 模組
@rollup/plugin-babel rollup babel外掛
@babel/core babel核心模組
@babel/preset-env babel
@babel/preset-typescript babel處理ts
@vue/babel-plugin-jsx 用tsx的方式寫vue
vue vue
rollup-plugin-terser 優化程式碼
rimraf 刪除工具
@rollup/plugin-replace 替換環境變數
rollup-plugin-serve 開發伺服器
rollup-plugin-livereload 熱更新服務
rollup-plugin-less less
@rollup/plugin-alias 路徑別名
eslint 程式碼格式校驗
inquirer 命令列互動
cross-env 設定環境變數
child_process 建立子執行緒執行命令
plop 根據模板建立目錄結構
typescript ts模組

在rollup.config.js中寫入以下rollup配置

import path from 'path'
// 將CommonJS模組轉換為ES6
import commonjs from 'rollup-plugin-commonjs'
// 在node_模組中查詢並繫結第三方依賴項
import resolve from '@rollup/plugin-node-resolve'
// 將json 檔案轉換為ES6 模組
import json from '@rollup/plugin-json'
// rollup babel外掛
import { babel } from '@rollup/plugin-babel'
// 優化程式碼 
import { terser } from 'rollup-plugin-terser'
// 刪除工具
import rm from 'rimraf'
// 替換環境變數
import replace from '@rollup/plugin-replace'
// 開發伺服器
import serve from 'rollup-plugin-serve'
// 熱更新服務
import livereload from 'rollup-plugin-livereload'
// less 處理
import less from 'rollup-plugin-less'
// 路徑別名
import alias from '@rollup/plugin-alias';


// 獲取入口檔案
const input = process.env.INPUT_FILE
// 開發環境or生產環境
const NODE_ENV = process.env.NODE_ENV
// 判斷是是否為生產環境
const isPro = function () {
  return NODE_ENV === 'production'
}
// 當前執行命令的路徑
const root = process.cwd()
// 獲取每個包的package.json 檔案
const pkg = require(path.resolve(root, 'package.json'))
// 字尾
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.less']
// 排除的打包 
const external = ['vue']
// 開發環境只打包esm
const output = [{
  exports: 'auto',
  file: path.join(root, pkg.module),
  format: 'es',
}]

// 如果是生產環境
if (isPro()) {
  // 也排出自己寫的包
  external.push(/@two-ui/)
  // 打其他包
  output.push({
    exports: 'auto',
    file: path.resolve(root, pkg.main),
    format: 'cjs'
  })
}

// 刪除dist目錄
rm(path.resolve(root, 'dist'), err => {
  if (err) throw err
})

export default {
  input,
  output,
  external,
  // 監聽的檔案
  watch: {
    exclude: 'node_modules/**'
  },
  // 不參與打包
  plugins: [
    resolve({
      preferBuiltins: false,
      mainFields: ['module', 'main'],
      extensions
    }),
    less({
      // 開發模式下才插入到頁面中
      insert:  isPro() ? false: true,
      output: 'dist/style/main.css',
    }),
    babel({
      babelHelpers: 'bundled',
      extensions,
      exclude: [
        '*.config.js',
        'packages/**/node_modules/*.d.ts',
        'node_modules/*.d.ts',
        '**/dist/**/*',
        '**/demo/*'
      ]
    }),
    commonjs(),
    json(),
    // 生產模式則壓縮程式碼
    isPro() && terser(),
    // 熱更新
    !isPro() && livereload({
      watch: ['dist', 'demo'],
      verbose: false
    }),
    // 開發模式替換環境變數
    !isPro() && replace({
      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
      "vue": "/vue.esm-browser.js"
    }),
    // 開發模式開啟靜態伺服器
    !isPro() &&  serve({
      open: true,
      port: 8080,
      contentBase: [path.resolve(root, 'dist'), path.resolve(root, 'demo'), path.resolve(__dirname, 'node_modules/vue/dist')],
      openPage: 'demo/index.html'
    })
  ]
}

增加啟動命令（這是在每個單獨的包中的）

{
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development INPUT_FILE=./src/index.ts rollup -c ../../rollup.config.js -w",
    "build:pro": "cross-env NODE_ENV=production INPUT_FILE=./src/index.ts rollup -c ../../rollup.config.js"
  }
}

建立babel.config.json檔案並寫入以下配置

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@vue/babel-plugin-jsx"
    ]
}

初始化eslint根據選項初始化eslint

npx eslint --init

增加格式化命令，校驗格式是否正確與修復格式

{
  "lint": "eslint ./packages --ext ts --ext tsx",
  "fix": "eslint ./packages --ext ts --ext tsx --fix"
}

建立.eslintignore檔案新增忽略需要校驗的檔案

node_modules
dist
rollup.config.js
packages/**/dist/
packages/**/*.d.ts
*.d.ts
/**/*.d.ts
es
lib

建立plop模板

mkdir plop-template/component
cd plop-template/component

建立一下目錄結構

component
└───demo
│		│	 index.hbs
└───src
│		│	 component.hbs
│		│	 index.hbs
│		babel.config.json
│		LICENSE
│		package.hbs
│		README.hbs

建立plopfile.js配置檔案

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a custom component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'packages/{{name}}/src/index.ts',
        templateFile: 'plop-template/component/src/index.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/demo/index.html',
        templateFile: 'plop-template/component/demo/index.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/src/{{name}}.tsx',
        templateFile: 'plop-template/component/src/component.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/babel.config.json',
        templateFile: 'plop-template/component/babel.config.json'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/package.json',
        templateFile: 'plop-template/component/package.hbs'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/LICENSE',
        templateFile: 'plop-template/component/LICENSE'
      },
      {
        type: 'add',
        path: 'packages/{{name}}/README.md',
        templateFile: 'plop-template/component/README.hbs'
      }
    ]
  })
}

倉庫地址https://github.com/kspf/two-ui

原文地址： https://kspf.xyz/archives/141/

相關文章