记录从vuecli打包库迁移到rollup打包

前言

最近的项目要实现一个拖拉拽的功能，于是乎需要把原来的模块粒度划分的更小，需要更多更细的组件，而组件打包对前端来说就是要打包成库，因为项目是vue项目，之前一直用vuecli来打包（vuecli构建目标（库）），但是现在要打包很多组件的时候，vuecli的弊端就显示出来了，打包速度太慢，只有一个入口文件，没有依赖其他的包的情况下，打包居然要耗时长达40+s（也可能是本人电脑垃圾的原因），如果是项目里原来的组件，每个组件打包要耗时120s以上，那么所有组件总的耗时加起来得要小半个小时了。于是我想提升下打包速度，从vuecli下手是不可能了，那就需要寻求其他的构建工具了，想起vue3的vite，底层用的就是rollup，查了下相关的资料，rollup简直就是为了打包库而生的！

准备工作

决定用rollup了，看了下相关文档，开始干！
踩坑中...

1. 安装最新版本的rollup-plugin-vue，打包后渲染不出来报错vue.openBlock is not a function，显然是因为vue版本不对，查看了下插件资料，发现6.0+以上是支持vue3的，vue2得安装6.0以下的版本

2. 因为有个组件sync-tree里有用到render函数，里面用到了jsx语法，在打包的时候遇到了报错如下：

   [!] (plugin commonjs) SyntaxError: Unexpected token (6:12) in F:\work\front-end\study\rollup\src\comp\test.vue?rollup-plugin-vue=script.js
   src/comp/test.vue?rollup-plugin-vue=script.js (6:12)
   4:     render(h){
   5:         return (
   6:             <span class="comp">test-12311</span>
               ^
   7:         )
   8:     }
   SyntaxError: Unexpected token (6:12) in F:\work\front-end\study\rollup\src\comp\test.vue?rollup-plugin-vue=script.js
    at Parser.pp$4.raise (F:\work\front-end\study\rollup\node_modules\rollup\dist\shared\rollup.js:19844:13)
    at Parser.pp$9.unexpected (F:\work\front-end\study\rollup\node_modules\rollup\dist\shared\rollup.js:17138:8)

   报错代码是在rollup-plugin-vue，通过查阅相关的issues发现也有人遇到了和我一样的问题，但是遗憾的是没有解决这个问题。通过查询各种社区的资料，很多人都说只要配置了babel的jsx的preset就可以，配置如下：

   babel({
     presets: ["@vue/babel-preset-jsx"],
   })

   我也这么配置了但是还是一样报错。
   后来找到了一篇文档带github源码示例的rollup打包vue组件库的文章，clone下来跑了一下果然是可以成功构建的。
   通过比较和筛查发现是因为@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 的，所以可以编译成功，但是过滤了? 之后，这个路径就变成了F:\work\front-end\study\rollup\src\comp\test.vue，.js不在编译范围内，所以才会编译报错。那怎么解决这个问题呢，只要在babel中配置extensions添加.vue 的配置就可以了，配置如下：

   extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],

   然后添加了css之后又报错了

   [!] (plugin babel) SyntaxError: F:\work\front-end\study\rollup\src\my-component.vue?rollup-plugin-vue=styles.0.css: Unexpected token (1:0)
   
   > 1 | .test[data-v-103b65c0] {
    | ^
     2 |   color: red;
     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: Unexpected token (1:0)
   
   > 1 | .test[data-v-103b65c0] {
    | ^
     2 |   color: red;
     3 | }
     4 | .test .comp[data-v-103b65c0] {
    at instantiate (F:\work\front-end\study\rollup\node_modules\@babel\parser\src\parse-error\credentials.js:61:22)
    at toParseError (F:\work\front-end\study\rollup\node_modules\@babel\parser\src\parse-error.js:58:12)

   提示css部分报错了，原因是我在rollup中的插件vue中配置了css单独打包，不打包到js中

    vue({
      css: false, // 把单文件vue中的样式，插入到html的style标签中,
      compileTemplate: true,
    })

   原因和jsx报错差不多，因为babel加了query的过滤，导致文件路径变成了F:\work\front-end\study\rollup\src\my-component.vue，但是css是不需要babel编译的，所以我们需要排查掉css这部分，通过查看babel源码发现filter部分是由两部分构成的，一个是extension中的后缀，一部分是自己定义的过滤方法

   const userDefinedFilter = typeof customFilter === '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.js
   import resolve from "@rollup/plugin-node-resolve";
   import vue from "rollup-plugin-vue";
   import babel from "@rollup/plugin-babel";
   import commonjs from "@rollup/plugin-commonjs";
   import image from "@rollup/plugin-image";
   import scss from "rollup-plugin-scss";
   import { terser } from "rollup-plugin-terser";
   import CleanCss from "clean-css";
   import alias from "@rollup/plugin-alias";
   import injectProcessEnv from "rollup-plugin-inject-process-env";
   const fs = require("fs");
   const path = require("path");
   const dotenv = require("dotenv");
   const dotenvExpand = require("dotenv-expand");
   
   var myEnv = dotenv.config();
   dotenvExpand.expand(myEnv);
   const myEnvObj = myEnv.parsed;
   const outputName = "myComponents";
   const extensions = [".scss", ".js", ".vue"];
   const customResolver = resolve({
     extensions,
   });
   const config = {
     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"], // 外部依赖
     plugins: [
    vue({
      css: false, // 把单文件vue中的样式，插入到html的style标签中,
      compileTemplate: true,
    }),
    resolve({extensions}),
    babel({
      presets: ["@vue/babel-preset-jsx"],
      babelHelpers: 'bundled',
      // exclude: 'node_modules/**',
      extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
      filter: id=>{
        console.log(id)
        return /(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id) && !/node_modules/.test(id)
      }
    }),
    commonjs(),
    image(),
    scss({
        output: function (styles, styleNodes) {
          const compressed = new CleanCss().minify(styles).styles;
          fs.writeFileSync(
            path.resolve(__dirname, `lib/${outputName}.css`),
            compressed
          );
        },
      }),
    terser({
      keep_fnames: false,
    }), // 压缩
    alias({
      entries: {
        "@comp": path.resolve(__dirname, "src/comp"),
      },
      customResolver,
    }),
    injectProcessEnv({
      NODE_ENV: "production",
      ...myEnvObj,
    })
     ],
   };
   
   export default config;