rollup 开发环境搭建

rollup 开发环境搭建

初始化项目使用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/