前言业务线的长期积累产生了很多重复的工具方法、业务功能模块等,我们可以直接使用rollup搭建一个npm私服工具包,方便后期业务使用并减少重复性任务代码编写。项目配置babel导入依赖首先运行如下命令安装babel相关:yarnadd@babel/core@babel/cli@babel/preset-env-Dconfigurationbabel.config.jsmodule.exports={presets:[["@babel/preset-env",{targets:">0.25%,notdead"}]]};with@babel/plugin-transform-runtime和core-js:yarnaddcore-js@babel/runtimeyarnadd@babel/plugin-transform-runtime-D修改babel.config.js如下:module.exports={presets:[["@babel/preset-env",{targets:">0.25%,notdead",useBuiltIns:"usage",corejs:"3.6.5"}]],plugins:["@babel/plugin-transform-运行”]};addnpmscripts"scripts:"{"babel":"babel./src/index.js-o./dist/index.js"}Typescript是面向未来的,所以这里引入typescript,开发用ts统一yarnaddtypescript@4.3.5-Dyarnadd@babel/preset-typescript-D修改babel配置如下:module.exports={presets:[['@babel/preset-env',{targets:'>0.25%,notdead',useBuiltIns:'usage',corejs:'3.6.5'},'@babel/preset-typescript']],plugins:['@babel/plugin-transform-runtime']};rollup项目是一个纯javascript项目,没有vue和react相关的业务代码,所以使用rollup进行打包导入依赖yarnaddrollup@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-node-resolverollup-plugin-terserrollup-plugin-typescript2tslib-Dconfigurerollup.config.jsimportbabelfrom'@rollup/插件-babel';//从'@rollup/plugin-commonjs'引入babelimportcommonjs;//引入cjs插件import{nodeResolve}from'@rollup/plugin-node-resolve';//引入resolveimporttypescriptfrom'rollup-plugin-typescript2';//tsimport{terser}来自'rollup-plugin-terser';//压缩包文件constextensions=['.js','.ts'];constpkg=require('./package.json');//从package.json=pkg.version导入常量版本;//项目版本constlicense=pkg.license;//协议constauthor=pkg.author;//作者//包文件的头部声明constbanner='/*!\n'+`*${pkg.name}v${version}\n`+`*(c)2020-${newDate().getFullYear()}${author}\n`+`*根据${license}许可证发布。\n`+'*/';module.exports={输入:'src/index.ts',输出:[//文件输出配置{file:'dist/index.umd.js',//打包后的文件位置及文件名format:'umd',name:'utools',//打包banner的全局变量名},{file:'dist/index.ESM。js',//打包文件的位置和文件名format:'esm',name:'utools',//打包banner的全局变量名}],plugins:[nodeResolve({extensions,modulesOnly:true}),commonjs(),typescript(),babel({babelHelpers:'runtime',include:'src/**',exclude:'node_modules/**',extensions}),terser()]};addnpmscripts"scripts:"{"build":"rollup-c"}Jest引入依赖只是为了引入单元测试,方便项目后续迭代维护yarnaddjest@27.0.2jest-globalsts-jest@27.0.2@types/jestbabel-jest@27.0.2-D配置jest.config.jsmodule.exports={preset:'ts-jest',testEnvironment:'node',transform:{'^.+\\.jsx?$':'babel-jest',//这是jest的默认配置'^.+\\.ts?$':'ts-jest'//typescript转换}};添加npmscripts"scripts:"{"test":"jest"}Eslint+commitlint此处使用的部门内部标准化验证工具,直接进行整体标准化验证,不再赘述。推荐参考eslint-config-alloyhttps://github.com/AlloyTeam/eslint-config-alloy其他配置rimraf这里引入了rimraf,每次打包前,删除修改原dist目录下的文件npmscripts"build":"rimrafdist/*&&rollup-c"release-it在这里引入release-it,方便??我们快速进行npm发布和安装依赖yarnaddrelease-it-D添加.release-it.jsonfile{"git":{"commitMessage":"chore:releasev${version}"},"npm":{"publish":false},"publishConfig":{"registry":"私服地址"}}添加npmscripts"scripts:"{"release":"release-it",}package.json如下{"name":"模块名称","version":"模块版本","description":"moduledesc","main":"dist/index.umd.js","types":"types/index.d.ts","module":"dist/index.esm.js","scripts":{"test":"jest","babel":"babel./src/index.js-o./dist/index.js","build":"rimrafdist/*&&rollup-c",“相关ase":"release-it","release:beta":"release-itmajor--preRelease=beta","fix:src":"npxeslintsrc--fix--ext.ts","fix:test":"npxeslinttest--fix--ext.js","lint":"npmrunfix:src&&npmrunfix:test"},"repository":{"type":"git"},“author”:“模块作者”,“license”:“MIT”,“devDependencies”:{},“dependencies”:{}}
