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.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/