为什么gridsome-plugin-typescript会触发UnhandledPromiseRejection警告？

报错根因说明 #

• 你遇到的Rule can only have one resource source错误核心原因是官方维护的gridsome-plugin-typescript插件已停止更新，内置的webpack配置规则和新版Gridsome依赖的webpack版本不兼容，插件会重复添加JS资源处理规则导致冲突。
• 配置中的\\是JSON对Windows系统反斜杠路径的正常转义写法，和报错无关，无需关注。
• TypeScript启动模板安装失败是因为模板依赖版本过旧，仅适配Node 12/14 LTS版本，和Windows 10环境下的高版本Node、npm不兼容，导致依赖安装过程中原生模块编译失败。

手动接入TypeScript操作步骤 #

不用废弃插件和过时模板，按以下步骤手动配置即可正常使用：

1. 清理旧依赖
   先卸载已安装的失效插件，删除缓存文件：

npm uninstall gridsome-plugin-typescript
rm -rf node_modules package-lock.json
# Windows环境删除命令为：
# rmdir /s /q node_modules
# del package-lock.json

2. 安装所需依赖

npm install typescript ts-loader @types/gridsome @types/node @vue/cli-plugin-typescript --save-dev

3. 新增TS配置文件
   项目根目录新建tsconfig.json，写入以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "gridsome"
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

4. 新增Vue类型声明文件
   项目根目录新建vue-shims.d.ts，解决.vue文件的TS类型识别问题：

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

5. 修改Gridsome配置
   打开gridsome.config.js，添加webpack的TS处理规则：

module.exports = {
  // 原有配置保持不变
  chainWebpack: config => {
    config.resolve.extensions.add('.ts').add('.tsx')
    config.module
      .rule('typescript')
      .test(/\.tsx?$/)
      .use('ts-loader')
      .loader('ts-loader')
      .options({
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true
      })
  }
}

配置完成后重新执行npm install安装依赖，再运行gridsome develop即可正常启动项目。

内容的提问来源于stack exchange，提问作者Optiq