本节我们将配置组件的打包，即让gulp同时工作的第三个compileTypescript：exports.default=gulp.series(removeDist,gulp.parallel(compileLess,styleScriptTask,compileTypescript),);这一步是gulp的工作就是找到所有需要参与rollup编译的文件，当然还需要排除一些测试脚本和样式脚本：//compiletsfunctioncompileTypescript(cb){constsource=['src/**/*.tsx','src/**/*.ts','src/**/*.d.ts','!src/**/__test__/**','!src/**/style/*.ts',];常量tsFiles=globArray(源);buildScript(tsFiles,{es:esDir,cjs:cjsDir,},cb,).then(()=>{cb();}).catch(err=>{console.log('--->builderr'，呃）;}）;//单文件输出buildBrowser('src/index.ts',umdDir,cb);cb();}globArray找到一个匹配函数，需要匹配目标文件并返回文件目录列表：constsource=['src/**/*.tsx',//源代码目录结构下的tsx文件是allinvolvedinrolluppackaging'src/**/*.ts',//源码目录结构下的ts文件都参与rollup打包'src/**/*.d.ts',下的ts类源代码目录结构类型声明文件全部参与rollup打包'!src/**/__test__/**',//测试目录不参与'!src/**/style/*.ts',//单独处理的样式脚本不参与];接下来看buildScript和buildBrowser这个函数，主要是打包函数：/***@desc:getrollupinput打包配置*@Date:2021-02-1810:43:08*@param{Object}inputOptionOverride覆盖输入配置*@param{Array}additionalPlugins添加插件*@param{object}tsConfig*@return{void}*/functiongetRollUpInputOption(inputOptionOverride={},tsConfig={},additionalPlugins=[],){const外部=['反应'，'反应-dom'];constbabelOptions={exclude:['**/node_modules/**'],babelHelpers:'bundled',presets:[//"stage-3",'@babel/preset-env','@babel/preset-react','@babel/preset-flow',],扩展:['tsx','ts','js','jsx'],插件:['@babel/transform-react-jsx',//['@babel/plugin-transform-runtime',{useESModules:true}],['@babel/plugin-proposal-class-properties',{loose:true,},],['@babel/plugin-proposal-decorators',{legacy:true,},],],};constonAnalysis=({bundleSize})=>{console.log(`Bundlesizebytes:${bundleSize}bytes`);返回;};constinputOptions={external,plugins:[common(),nodeResolve({extensions:['.js','.jsx','.ts','.tsx','.less'],}),别名({entries:[{find:'@',replacement:path.resolve('./src'),},{find:'~@',replacement:path.resolve('./src'),},]，}），关于place({stylePre:JSON.stringify('ti'),'process.env.NODE_ENV':JSON.stringify('production'),}),less({option:{globalVars:{'theme-color':'#136BDE',hack:`true;@import"${varsPath}"`,},},输出：false,}),typescript({tsconfigDefaults:{include:['./src/**/*.ts','./src/**/*.tsx'],compilerOptions:{lib:['es5','es6','dom'],//排除:['./src/**/style/*.ts'],target:'ES6',//typeRoots:["./types"],moduleResolution:'node',module:'ES6',jsx:'react',allowSyntheticDefaultImports:true,...tsConfig,},},}),babel(babelOptions),jsx({factory:'React.createElement',extensions:['js','jsx','tsx'],}),分析({onAnalysis,skipFormatted:true,stdout:true}),...additionalPlugins,],...inputOptionOverride,};returninputOptions;}//Componentescjs规范编译输出exports.buildScript=asyncfunction(inputPaths,outputConf){//输出格式constoutputOptions=[{//file:outputPath,format:'cjs',dir:outputConf.cjs,preserveModulesRoot:'src',preserveModules:true,exports:'named',hoistTransitiveImports:false,//不导入其他模块代码},{//file:outputPath,format:'esm',dir:outputConf.es,preserveModulesRoot:'src',保存Modules:true,exports:'named',hoistTransitiveImports:false,//不导入其他模块代码},];for(constoutputOptionofoutputOptions){constbundle=awaitrollup.rollup(getRollUpInputOption({input:inputPaths,treeshake:true,},{declaration:true,},),);等待bundle.generate(outputOption);等待bundle.write(outputOption);等待bundle.close();}};//打包成文件exports.buildBrowser=asyncfunction(entryPath,outputDir,cb){constoutputOption={file:outputDir+'/index.js',format:'umd',//dir:outputDir,preserveModulesRoot:'src',preserveModules:true,name:'ti',//使用浏览器时需要暴露的库名称exports:'named',globals:{react:'React',//的需要为单个包'react-dom'公开的全局变量：'ReactD哦',},};constbundle=awaitrollup.rollup(getRollUpInputOption({input:entryPath,treeshake:true,},{},[uglify()],),);等待bundle.generate(outputOption);等待bundle.write(outputOption);等待bundle.close();cb();};buildScript是输出es和cjs规范的过程，buildBrowser是umd规范的过程。通过treeshaking启用组件打包
