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/