前言最近项目需要实现一个拖拽功能，所以需要把原来的模块粒度分成更小的，需要更多更细的组件，以及组件打包对前端来说比较重要的就是要打包成库，因为项目是vue项目，之前用vuecli打包过（vuecli构建目标（库）），但是现在当很多组件需要打包，vuecli的缺点就体现出来了，打包速度太慢，只有一个入口文件，不依赖其他包，打包需要40+s（也可能是我的电脑垃圾的原因）。如果是项目中的原始组件，每个组件打包需要120s甚至更长的时间，那么所有组件的总耗时将不到半小时。所以想提高打包速度。无法从vuecli入手，需要寻找其他的构建工具。想到了vue3的vite，底层用的是rollup。查了相关资料，rollup简单说就是打包库。出生！我决定使用rollup进行准备工作。阅读相关文档后，让我们开始吧！踩坑...安装最新版rollup-plugin-vue。打包后无法渲染，报错。vue.openBlock不是函数，显然是因为vue的版本不对。查了下插件信息，发现6.0+及以上支持vue3的，vue2必须要安装6.0以下的版本，因为有一个componentsync-tree使用了render函数，使用的是jsx语法。打包时报错如下：[!](plugincommonjs)SyntaxError:Unexpectedtoken(6:12)inF:\work\front-end\study\rollup\src\comp\test.vue?rollup-plugin-vue=script.jssrc/comp/test.vue?rollup-plugin-vue=script.js(6:12)4:render(h){5:return(6:test-12311^7:)8:}SyntaxError:F:\work\front-end\study\rollup\src\comp\test.vue?rollup-plugin-vue=中的意外标记(6:12)Parser.pp$4.raise(F:\work\front-end\study\rollup\node_modules\rollup\dist\shared\rollup.js:19844:13)在Parser.pp$9.unexpected(F:\work\前端\study\rollup\node_modules\rollup\dist\shared\rollup.js:17138:8)错误代码在rollup-plugin-vue中。通过查阅相关问题，发现有人遇到了和我一样的问题，可惜都没有解决这个问题。通过查询各种社区资料，很多人说只要配置babel的jsx的preset即可，配置如下：babel({presets:["@vue/babel-preset-jsx"],})我也配置了像这样但是还是报同样的错误。后来找了一篇关于rollup打包vue组件库的文章，里面有github源码例子。我克隆它并运行它，它成功构建了。通过对比筛选，发现是@rollup/plugin-babel包的版本问题。v5.2.1没问题，v5.2.2会报错。通过对比源码提交日志，发现v5.2.2修改了filter方法，增加了stripQuery方法来过滤？之前的路径，比如F:\work\front-end\study\rollup\src\comp\test.vue?rollup-plugin-vue=script.js这个路径之前没有过滤里面有.js，所以可以编译成功，但是经过filter?后，路径变为F:\work\front-end\study\rollup\src\comp\test.vue，.js不在编译范围内，所以编译报错错误。那么如何解决这个问题，只需在babel中配置extensions添加.vue配置即可，配置如下：extensions:['.js','.jsx','.es6','.es','.mjs','.vue'],然后添加css后报错[!](pluginbabel)SyntaxError:F:\work\front-end\study\rollup\src\my-component.vue?rollup-plugin-vue=styles.0.css:意外标记(1:0)>1|.test[数据-v-103b65c0]{|^2|红色;3|}4|.test.comp[data-v-103b65c0]{src/my-component.vue?rollup-plugin-vue=styles.0.css(1:0)SyntaxError:F:\work\front-end\study\rollup\src\my-component.vue?rollup-plugin-vue=styles.0.css:意外标记(1:0)>1|.test[数据-v-103b65c0]{|^2|红色;3|}4|.test.comp[data-v-103b65c0]{在实例化(F:\work\front-end\study\rollup\node_modules\@babel\parser\src\parse-error\credentials.js:61:22)在toParseError(F:\work\front-end\study\rollup\node_modules\@babel\parser\src\parse-error.js:58:12)css部分报错是因为我在插件里单独配置了cssvueinrollup打包，不打包成jsvue({css:false,//将单文件vue中的style插入html的style标签中，compileTemplate:true,})原因和jsx报错类似，因为babel加了查询过滤，导致文件路径变成F:\work\front-end\study\rollup\src\my-component.vue，但是css是不需要babel编译的，所以我们需要检查一下css部分。通过查看babel源码，我们发现filter部分由两部分组成，一是extension中的后缀，二是我们自己定义的filter方法。constuserDefinedFilter=typeofcustomFilter==='function'?customFilter:pluginutils.createFilter(include,exclude);filter=id=>extensionRegExp.test(stripQuery(id).bareId)&&userDefinedFilter(id);自己写一个排除css的过滤方法即可，配置如下：filter:id=>{console.log(id)return/(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id)}附上完整的rollup.config.js文件内容//rollup.config.jsimportresolvefrom"@rollup/plugin-node-resolve";importvuefrom"rollup-plugin-vue";importbabel来自“@rollup/plugin-babel”；从“@rollup/plugin-commonjs”导入commonjs；从“@rollup/plugin-image”导入图像；从“rollup-plugin-scss”导入scss；从“导入{terser}”“rollup-plugin-terser”；导入CleanCssfrom“clean-css”；从“@rollup/plugin-alias”导入别名；从“rollup-plugin-inject-process-env”导入injectProcessEnv；constfs=require(“fs”);constpath=require("路径");constdotenv=require("dotenv");constdotenvExpand=require("dotenv-expand");varmyEnv=dotenv.config();dotenvExpand.expand(myEnv);constmyEnvObj=myEnv.parsed;constoutputName="myComponents";constextensions=[".scss",".js",".vue"];constcustomResolver=resolve({extensions,});constconfig={input:"./src/wrapper.js",//必填，入口文件output:{//必填，输出文件（如果要输出多个，可以是数组）file:`lib/${outputName}.min.js`,format:"umd",name:outputName,//exports:"named",//输出多个文件globals:{vue:"Vue",//告诉rollup全局变量Vue是vue},},external:["vue","hui","vuex"],//外部依赖插件:[vue({css:false,//将单文件vue中的style插入到html的style标签中,compileTemplate:true,}),resolve({extensions}),babel({presets:["@vue/babel-preset-jsx"],babelHelpers:'bundled',//exclude:'node_modules/**',extensions:['.js','.jsx','.es6','.es','.mjs','.vue'],过滤器:id=>{console.log(id)return/(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id)&&!/node_modules/.test(id)}}),commonjs(),image(),scss({output:function(styles,styleNodes){constcompressed=newCleanCss().minify(styles).styles;fs.writeFileSync(路径.resolve(__dirname,`lib/${outputName}.css`),compressed);},}),terser({keep_fnames:false,}),//压缩别名({entries:{"@comp":path.resolve(__dirname,"src/comp"),},customResolver,}),injectProcessEnv({NODE_ENV:"production",...myEnvObj,})],};导出默认配置；
