rollup开发环境构建初始项目使用lerna管理项目使用npminit初始化项目npminit-yinstalllerna并初始化项目npminstalllerna--save-dev#npx使用node_modules中的packagenpxnpxlernainit现在已经生成如下目录结构二-ui└────node_modules└────packages│lerna.json│package.json安装rollup并创建rollup.config.js文件npminstallrollup--save-devtouchrollup.config。js#vscode打开rollup配置文件代码rollup.config.js安装如下插件包名函数rollup-plugin-commonjs将CommonJS模块转为ES6@rollup/plugin-node-resolve在node_modules中查找并绑定第三方依赖@rollup/plugin-json将json文件转成ES6模块@rollup/plugin-babelrollupbabelplugin@babel/corebabelcoremodule@babel/preset-envbabel@babel/preset-typescriptbabelprocessts@vue/babel-plugin-jsxwritevuevuevuerollup-tsx方式的插件-terseroptimizecoderimraf删除工具@rollup/plugin-replace替换环境变量rollup-plugin-serve开发服务器rollup-plugin-livereload热更新服务rollup-plugin-lessless@rollup/plugin-alias路径别名eslint代码格式验证查询器命令行交互cross-env设置环境变量child_process创建子线程执行命令plop根据模板typescriptts模块创建目录结构在rollup.config.js中写入如下rollup配置importpathfrom'path'//将CommonJS模块转换为ES6导入通讯onjsfrom'rollup-plugin-commonjs'//在node_modules中查找并绑定第三方依赖importresolvefrom'@rollup/plugin-node-resolve'//将json文件转换为ES6模块importjsonfrom'@rollup/plugin-json'//rollupbabelpluginimport{babel}from'@rollup/plugin-babel'//优化代码import{terser}from'rollup-plugin-terser'//删除工具importrmfrom'rimraf'//替换环境variableimportreplacefrom'@rollup/plugin-replace'//开发服务器importservefrom'rollup-plugin-serve'//热更新服务importlivereloadfrom'rollup-plugin-livereload'//lessprocessingimportlessfrom'rollup-plugin-less'//pathaliasimportaliasfrom'@rollup/plugin-alias';//获取入口文件constinput=process.env.INPUT_FILE//开发环境或生产环境constNODE_ENV=process.env.NODE_ENV//判断是否为生产环境constisPro=function(){returnNODE_ENV==='production'}//当前命令ex的路径ecutionconstroot=process.cwd()//获取每个包的package.json文件constpkg=require(path.resolve(root,'package.json'))//后缀constextensions=['.js','.jsx','.ts','.tsx','.less']//排除打包constexternal=['vue']//开发环境只打包esmconstoutput=[{exports:'auto',file:path.join(root,pkg.module),format:'es',}]//如果是生产环境if(isPro()){//alsodischarge自己写包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)throwerr})exportdefault{input,output,external,//监控文件watch:{exclude:'node_modules/**'},//不参与打包plugins:[resolve({preferBuiltins:false,mainFields:['module','main'],extensions}),less({//只插入开发模式在页面中插入：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-envNODE_ENV=developmentINPUT_FILE=./src/index.tsrollup-c../../rollup.config.js-w","build:pro":"cross-envNODE_ENV=productionINPUT_FILE=./src/index.tsrollup-c../../rollup.config.js"}}创建babel.config.json文件，写入如下配置{"presets":["@babel/preset-env","@babel/preset-typescript"],"plugins":["@vue/babel-plugin-jsx"]}根据选项初始化eslint初始化eslintnpxeslint--init添加格式化命令检查格式是否正确并修复格式{"lint":"eslint./packages--extts--exttsx","fix":"eslint./packages--extts--exttsx--fix"}Create.eslintignorefile添加忽略文件node_modulesdistrollup.config.jspackages/**/dist/packages/**/*.d.ts*.d.ts/**/*.d.tseslib创建plop模板mkdirplop-template/componentcdplop-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:'创建自定义组件',prompts:[{type:'input',name:'name',message:'componentname',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',路径:'packages/{{name}}/README.md',templateFile:'plop-template/component/README.hbs'}]})}库地址https://github.com/kspf/two-ui原文件地址：https://kspf.xyz/archives/141/
