Vite 问题记录 ​

import.meta.glob问题记录 ​

1. 在同一个模块不会重复调用 ​

当你在一个组件内使用了import.meta.glob函数，如果这个组件复用了多次，这个模块的组件会复用第一次import.meta.glob的结果。

该函数只会在组件第一次初始化的时候调用，后面的在组件实例会复用初始化时调用的结果。

cmj和esm问题记录 ​

默认导出的内容，不能用具名导入 ​

// 1.ts
export default {
    a: 1,
    b: 2,
};

// 2.ts
import { a } from '1.ts'
// 这样是错误的，不能具名导入

require 不能动态拼接 ​

cmj不能赋值导出 ​

// 错误的
const C = Oop.extend({
  // ...
})
module.exports = C

C.TENANT_SUB_VIEW_LIST = TENANT_SUB_VIEW_LIST

模块引用错误，引用值不存在 ​

由于更新依赖的时候不会删除旧文件，导致本地运行的时候，三方依赖通过esm引用的旧文件内容，而该引用未设置值，在本地模块中会通过setValue设置值，本地setValue中引用的是新文件的内容，从而导致，三方依赖中会报错，引用值不存在（因为本地文件setValue调用的新文件，三方依赖用的旧文件）

解决办法：

直接删除node_modules .pnpm 里的旧文件

postcss 路径配置 ​

postcss.config.js里的path路径可以指定在哪个地方寻找文件

require('postcss-import')({
  path: [
    path.resolve(__dirname, '../src'),
    path.resolve(__dirname, '../packages'),
    path.resolve(__dirname, '../node_modules'),
  ],
})

HSTS 自动重定向到 https 修复 ​

项目开启了 http2 后，响应头上会加上 Strict-Transport-Security: max-age=31536000，导致本地开发时，http 会 307 临时重定向到 https，并且浏览器会缓存这个重定向，导致后续无法访问 http。

解决办法：

HSTS: Fix automatic re-routing of http:// to https:// on localhost in Web Browsers

设置响应头Strict-Transport-Security: max-age=0

若出现类似`http: protocol error: unknown error: net::ERR_FAILED`的错误，可以尝试清除浏览器缓存，或者直接通过 devtools 的 network 面板 `disable cache` 来禁用缓存

Debug node_modules 依赖 ​

Cannot watch specific dependencies in node_modules

import { ViteDevServer } from 'vite'

export function pluginWatchNodeModules(modules) {
  // Merge module into pipe separated string for RegExp() below.
  const pattern = `/node_modules\\/(?!${modules.join('|')}).*/`
  return {
    name: 'watch-node-modules',
    configureServer: (server: ViteDevServer): void => {
      server.watcher.options = {
        ...server.watcher.options,
        ignored: [
          new RegExp(pattern),
          '**/.git/**',
        ]
      }
    }
  }
}

Then to use it, pass into your plugins array like so:

// Import from the separate file you might store this in, e.g. 'utils'
import { pluginWatchNodeModules } from './utils'

const config = {
  plugins: [
  // ... other plugins...
    pluginWatchNodeModules(['your-plugin', 'another-example']),
  ]
}

Edit: p.s. Don't forget to ensure that you exclude these packages from optimizeDeps like so:

{
  "optimizeDeps": {
    "exclude": [
      "your-plugin",
      "another-example"
    ]
  }
}