【互操作的胶水和提示代码】是什么？

Question

umi4 在用 vite 启动的时候，我自己写的 npm 包会报错，

但用 webpack 启动则不会有这个问题

在仓库提了 issues 后，官方的回答是下图

我用 rollup 和 father 打包过，都有这个问题，

【互操作的胶水和提示代码】是什么，该怎么产出呢？

求解

Answer 1

这个意思其实就是兼容配置，题主可以想象一下用胶水把 webpack 和 vite 粘在一起

所以它没有通用的方案，是根据实际情况去配置的。vite 的打包方式和 webpack 不大一致（比如 vite 使用 ES module，如果题主的代码中存在 common js 的范式，就会不兼容）

题主可以参考各自的官方文档，看看是否缺少某些配置

补充示例

胶水代码的定义是宽泛的，只要能兼容理论上就可以算作一种“胶水”

比如说你的项目用 webpack 配置了一个 sass-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      // 其他loader配置...
    ]
  },
};

然后你想在 vite 中也兼容就可以这么做：

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        implementation: require('sass')
      }
    }
  },
});

Answer 2

你不用把它当成一个很复杂的概念，就按照字面理解即可：

• 胶水：把两段本不兼容的代码粘在一起，让他们能够一起工作
• 提示代码：大概是 .d.ts，通过描述让脚手架理解它的接口和功能

前者一般来说需要自己写，因为毕竟是代码。后者比较简单，如果你用 TS 的话，tsconfig.json 里加上 declaration: true 然后执行 tsc 即可。JS 我暂时没搞过。