当我将js更改为类型记录时，字段“browser”不包含有效的别名配置

Question

在我将google扩展弹出索引从index.js更改为index.ts后，显示了如下错误：

➜  reddwaf-translate-plugin git:(main) ✗ npm run dev                     

> reddwaf-translate-plugin@1.0.0 dev
> rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js

asset resource/image/logo.png 7.14 KiB [emitted] [from: src/resource/image/logo.png] [copied]
asset manifest.json 1.22 KiB [emitted] [from: src/manifest.json] [copied]
asset popup/popup.html 195 bytes [emitted]
asset popup.js 99 bytes [emitted] (name: popup)

ERROR in popup
Module not found: Error: Can't resolve './src/popup/' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin'
resolve './src/popup/' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin'
  Parsed request is a directory
  using description file: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/package.json (relative path: ./src/popup)
      as directory
        existing directory /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup
          using description file: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/package.json (relative path: ./src/popup)
            using path: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/index
              using description file: /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/package.json (relative path: ./src/popup/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/index.wasm doesn't exist

webpack 5.67.0 compiled with 1 error in 76 ms

为什么会发生这种情况，我应该如何解决这个问题？我已经在webpack中添加了类型记录配置：

{
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        },
        exclude: /node_modules/
      },

这是我的package.json

{
  "name": "reddwaf-translate-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js",
    "build": "gulp --cwd . --gulpfile build/gulp-build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jiangxiaoqiang/reddwaf-translate-plugin.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin/issues"
  },
  "homepage": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin#readme",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "copy-webpack-plugin": "^10.2.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.5.3",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.5",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@types/chrome": "^0.0.177",
    "@types/webextension-polyfill": "^0.8.2",
    "vue": "^3.2.29"
  }
}

Answer 1

部分答复：

确保webpack.config.json在处理JS的任何代码之前都包含了TypeScript：

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      {
        test: /\.(ts)x?$/,
        use: {
          loader: 'ts-loader',
          options: {
            configFile: 'tsconfig.test.json',
          },
        },
      },

(如果您还没有这样做，请使用npm install ts-loader)

来源：用Webpack 4在打字/Sass环境中建立故事簿

在完成上述操作之后，我得到了一个新的错误，TS18002: The 'files' list in config file 'tsconfig.json' is empty.

在"compilerOptions": {}结束后，在tsconfig.json中添加如下内容

  "include": [
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "./node_modules",
    "**/*.spec.ts"
  ],