typescript参数省略-Vue3源码分析-rollup打包monorepo

文本

Vue3使用rollup进行打包。 我们还使用 rollup 来打包我们的应用程序。 如果您不了解rollup，请查看官方网站。 Monorepo是多个单仓库的合并，所以我们先打包一个单仓库。 ，然后弄清楚如何一键将它们全部打包

包共享

在我的项目中，共享仓库是utils函数的集合，用于导入一些工具函数。 然后我们可以在该目录下的package.json中安装rollup。 正当我想在共享目录下安装rollup插件时，我的大脑打出了一个老兄的问号？

基于这个特性，monorepo可以在其下安装依赖，然后可以共享子包。 我毫不犹豫地在根目录下输入以下命令：

pnpm add rollup -w -D
复制代码

有了rollup，我们是不是需要在打包目录下创建一个配置文件rollup.config.js，里面写入口、出口、打包格式等。

// 由于咋们需要打包成cjs, ems的格式，对外导出一个函数吧
[
  {
    input: './src/index.ts',
    output: {
      file: 'dist/index.esm.js',
      format: 'esm',
    },
  },
  {
    input: './src/index.ts',
    output: {
      file: 'dist/index.cjs.js',
      format: 'cjs',
    },
  }
 ]
复制代码

然后将打包的命令添加到该目录下的package.json中：

 "build": "rollup -c"
复制代码

好了，就到这里了，我们来试试吧，结果：

分析错误后可以发现我们使用了ts的句型，rollup很难转换ts的句型，所以需要使用插件。

然后rollup转换ts的插件有很多种，这里我们用最快的一种，esbuild，rollup-plugin-esbuild

pnpm add esbuild rollup-plugin-esbuild -w -D
复制代码

关于rollup-plugin-esbuild插件，官方介绍说：

esbuild 是迄今为止最快的 TS/ES 之一，仅次于 ES6 编译器和压缩器，该插件可以为您替换 rollup-plugin-typescript2、@rollup/plugin-typescript 和 rollup-plugin-terser。 这意味着这个插件目前据说将ts/esnext转换为es6是最快的编译和压缩。 该插件可以替代 rollup-plugin-typescript2、@rollup/plugin-typescript 和 rollup-plugin-terser 的集合

但如果我们需要打包特别低版本的代码，请参考rollup实战第三节打包生产低版本的代码。

言归正传，接下来我们来使用插件，并将插件添加到配置文件中

//... 省略其他
plugins: [
      esbuild({
        target: 'node14',
      }),
    ]
复制代码

再次

通过结果可以看出typescript参数省略typescript参数省略，打包成功了！

但既然我们有了ts，我们肯定需要生成我们代码的类型，所以使用rollup-plugin-dts来生成它。

pnpm add rollup-plugin-dts -w -D
复制代码

详情请查看 rollup-plugin-dts

// 在数组后面在加上一项，
{
    input: './src/index.ts',
    output: {
      file: 'dist/index.dts',
      format: 'esm',
    },
    plugins: [
      dts(),
    ],
  },
复制代码

然后就可以了。 现在我们已经完成了一个项目。

打包多个

既然是这样写的，那么其他人是不是也可以写配置文件呢？是的，没错，可以在对应的单项目下写rollup.config.js来配置它们的打包。

然后我们在该目录下的package.json中添加一行命令：

"build": "pnpm -r --filter=./packages/** run build"
复制代码

我们分开订单怎么样？

pnpm -r 相当于 pnpm --recursive，这意味着在工作区中的每个项目中运行该命令，不包括根项目。 具体参见--filter=./packages/**，意思是过滤其他文件和文件。 文件夹，仅使用packages下的所有文件夹 run build 后缀为pnpm -r run build，执行package.json中的build命令，详情请查看

合起来就意味着依次执行packages上面所有文件夹的package.json的build命令

优化

通过之前的形式我们可以成功打包，但是我们这里也可以进行优化。 每次需要自动删除包的dist结果时，我们都可以使用rimraf库来帮我们手动删除。

pnpm add rimraf -d -W
复制代码

然后更改各个子包中的构建命令

"build": "rimraf dist && rollup -c"
复制代码

比较vue3包装

这里可能有人会说，vue3仓库不是这样的。 确实，vue3仓库的打包流程如下：

如果有兴趣的话可以看一下源码。 这是流程图。 如果你想使用这些方法，你可以自己实现！