rollup 開發(fā)環(huán)境搭建

image-20210815222527524

初始化項(xiàng)目使用lerna管理項(xiàng)目

使用npm init 初始化項(xiàng)目

npm init -y 

安裝lerna并初始化項(xiàng)目

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

現(xiàn)在已經(jīng)生成了下面目錄結(jié)構(gòu)

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

安裝rollup并創(chuàng)建rollup.config.js文件

npm install rollup --save-dev
touch rollup.config.js
# vscode 打開rollup配置文件
code rollup.config.js

安裝下面插件

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

import path from 'path'
// 將CommonJS模塊轉(zhuǎn)換為ES6
import commonjs from 'rollup-plugin-commonjs'
// 在node_模塊中查找并綁定第三方依賴項(xiàng)
import resolve from '@rollup/plugin-node-resolve'
// 將json 文件轉(zhuǎn)換為ES6 模塊
import json from '@rollup/plugin-json'
// rollup babel插件
import { babel } from '@rollup/plugin-babel'
// 優(yōu)化代碼 
import { terser } from 'rollup-plugin-terser'
// 刪除工具
import rm from 'rimraf'
// 替換環(huán)境變量
import replace from '@rollup/plugin-replace'
// 開發(fā)服務(wù)器
import serve from 'rollup-plugin-serve'
// 熱更新服務(wù)
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
// 開發(fā)環(huán)境or生產(chǎn)環(huán)境
const NODE_ENV = process.env.NODE_ENV
// 判斷是是否為生產(chǎn)環(huán)境
const isPro = function () {
  return NODE_ENV === 'production'
}
// 當(dāng)前執(zhí)行命令的路徑
const root = process.cwd()
// 獲取每個(gè)包的package.json 文件
const pkg = require(path.resolve(root, 'package.json'))
// 后綴
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.less']
// 排除的打包 
const external = ['vue']
// 開發(fā)環(huán)境只打包esm
const output = [{
  exports: 'auto',
  file: path.join(root, pkg.module),
  format: 'es',
}]

// 如果是生產(chǎn)環(huán)境
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,
  // 監(jiān)聽的文件
  watch: {
    exclude: 'node_modules/**'
  },
  // 不參與打包
  plugins: [
    resolve({
      preferBuiltins: false,
      mainFields: ['module', 'main'],
      extensions
    }),
    less({
      // 開發(fā)模式下才插入到頁面中
      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(),
    // 生產(chǎn)模式則壓縮代碼
    isPro() && terser(),
    // 熱更新
    !isPro() && livereload({
      watch: ['dist', 'demo'],
      verbose: false
    }),
    // 開發(fā)模式替換環(huán)境變量
    !isPro() && replace({
      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
      "vue": "/vue.esm-browser.js"
    }),
    // 開發(fā)模式開啟靜態(tài)服務(wù)器
    !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'
    })
  ]
}

增加啟動(dòng)命令（這是在每個(gè)單獨(dú)的包中的）

{
  "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"
  }
}

創(chuàng)建babel.config.json文件并寫入以下配置

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

初始化eslint根據(jù)選項(xiàng)初始化eslint

npx eslint --init

增加格式化命令璃吧，校驗(yàn)格式是否正確與修復(fù)格式

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

創(chuàng)建.eslintignore文件添加忽略需要校驗(yàn)的文件

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

創(chuàng)建plop模板

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

創(chuàng)建一下目錄結(jié)構(gòu)

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

創(chuàng)建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'
      }
    ]
  })
}

倉(cāng)庫(kù)地址https://github.com/kspf/two-ui

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