如何解決我的 TypeScript/ESLint/Webpack 轉譯問題

Question

我已經檢查其他線程超過幾天了； 我在網上多次發現相同的錯誤，但無法復制已發布的解決方案。 為每個不同的版本編寫 babel/webpack 配置的方法有很多，這一事實並沒有多大幫助。 我正在運行 Webpack、TS 和 ESLint。 我能夠得到的“最佳情況”錯誤如下。 我真的很想得到一些幫助！ :[ 在許多事情中，我嘗試將 tsx 轉換為 jsx 並使用 jsx 保留而不是反應。

終端編譯器錯誤：

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Milo\Desktop\Programacion\zekeapp\src\index.tsx: Unexpected token (12:2)

  10 | 
  11 | ReactDOM.render(
> 12 |   <Provider store={store}>
     |   ^
  13 |     <Router>
  14 |       <Main />
  15 |     </Router>

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import store from './store';
import Main from './containers/Main';
import { lightTheme } from './templates/theme';

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Main />
    </Router>
  </Provider>,
  document.getElementById('root')
);

webpack.config.tsx

import * as path from 'path';

module.exports = {
  entry: path.join(__dirname, './src/index.tsx'),
  mode: 'production',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist/scripts')
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

配置文件

{
  "compilerOptions": {
    "target": "ES2018" /* Specify ECMAScript target version: "ES3" (default), "ES5", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019" or "ESNEXT". */,
    "module": "commonjs" /* Specify module code generation: "none", "commonjs", "amd", "system", "umd", "es2015", or "ESNext". */,
    "jsx": "preserve" /* Specify JSX code generation: "preserve", "react-native", or "react". */,
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": false /* Raise error on expressions and declarations with an implied "any" type. */,
    "moduleResolution": "node" /* Specify module resolution strategy: "node" (Node.js) or "classic" (TypeScript pre-1.6). */,
    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
    "paths": {
      "#server/*": ["./server/*"],
      "#src/*": ["./src/*"]
    },
    "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
    "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  }
}

Answer 1

我按照官方的React 和 Webpack文檔得到了一個示例項目。

進行這些更改：

1. 將webpack.config.tsx重命名為webpack.config.js （它由節點而不是 TypeScript 運行）

2. 安裝ts-loader來轉譯 .ts/.tsx 文件： npm install --save-dev ts-loader

3. 編輯webpack.config.js並配置 ts-loader

這個例子也包括babel-loader 。

請注意exclude: /node_modules/,和configFile: path.resolve('./tsconfig.json'),行，它們很重要並且需要正常工作（有關詳細信息，請參閱下面的故障排除部分）

    // webpack.config.js
    {
        //...
        module: {
            rules: [
                {
                    test: /\.(js|jsx|tsx|ts)$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                        },
                        {
                            loader: 'ts-loader',
                            options: {
                                configFile: path.resolve('./tsconfig.json'),
                            },
                        },
                    ],
                }
            ]
        }
    }

4. 編輯tsconfig.json並添加以下設置：

    // tsconfig.json
    {
        "compilerOptions": {
            //...

            // Can use to "react" if you aren't using `babel-loader` and `@babel/preset-react` to handle jsx
            "jsx": "react" /* Specify JSX code generation: "preserve", "react-native", or "react". */,

            // Include these so the `react` imports work nicely:
            "esModuleInterop": true,
            "allowSyntheticDefaultImports": true
        }
    }

5. 您應該希望此時能夠構建項目： npx webpack

    $ npx webpack
    Hash: 184cde71516bcbc08144
    Version: webpack 4.41.5
    Time: 2558ms
    Built at: 01/13/2020 2:34:08 PM
        Asset     Size  Chunks             Chunk Names
    bundle.js  128 KiB       0  [emitted]  main
    Entrypoint main = bundle.js
    [2] ./src/index.tsx 498 bytes {0} [built]
    [8] ./src/Main.tsx 385 bytes {0} [built]
        + 7 hidden modules

---

2. 示例文件

以下是我的測試項目的文件內容：

包.json

{
    "devDependencies": {
        "@babel/core": "^7.8.0",
        "babel-loader": "^8.0.6",
        "ts-loader": "^6.2.1",
        "typescript": "^3.7.4",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    },
    "dependencies": {
        "@types/react": "^16.9.17",
        "@types/react-dom": "^16.9.4",
        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    }
}

配置文件

{
    "compilerOptions": {
        "target": "ES2018" /* Specify ECMAScript target version: "ES3" (default), "ES5", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019" or "ESNEXT". */,
        "module": "commonjs" /* Specify module code generation: "none", "commonjs", "amd", "system", "umd", "es2015", or "ESNext". */,
        "strict": true /* Enable all strict type-checking options. */,
        "noImplicitAny": false /* Raise error on expressions and declarations with an implied "any" type. */,
        "moduleResolution": "node" /* Specify module resolution strategy: "node" (Node.js) or "classic" (TypeScript pre-1.6). */,
        "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
        "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
        "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
        "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
        "jsx": "react" /* Specify JSX code generation: "preserve", "react-native", or "react". */,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true
    }
}

webpack.config.json

const path = require('path');

module.exports = {
    entry: path.join(__dirname, './src/index.tsx'),
    mode: 'production',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|tsx|ts)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            configFile: path.resolve('./tsconfig.json'),
                        },
                    },
                ],
            }
        ]
    }
};

源代碼/索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import Main from './Main';

ReactDOM.render( <Main />, document.getElementById('root') );

源代碼/Main.tsx

import React from 'react';
import ReactDOM from 'react-dom';

export default function Main(){
    return (<h1>This is Main</h1>);
}

---

3. 故障排除

我在設置時遇到了這些問題 - 這是我找到的解決方案。

錯誤：您收到如下錯誤： The 'files' list in config file 'tsconfig.json' is empty.

例如

ERROR in [tsl] ERROR
  TS18002: The 'files' list in config file 'tsconfig.json' is empty.

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: error while parsing tsconfig.json

解決方法：解析完整的tsconfig.json路徑

// webpack.config.js
{
    loader: 'ts-loader',
    options: {
        // configFile: './tsconfig.json', // !! WRONG
        configFile: path.resolve('./tsconfig.json'),    // CORRECT
    },
}

---

錯誤：您收到如下錯誤： Module not found: Error: Can't resolve '...' in 'path-to-project/node_modules/react'

例如

ERROR in ./node_modules/react/index.js
Module not found: Error: Can't resolve './Main' in 'C:\webpack-typescript\node_modules\react'
@ ./node_modules/react/index.js 15:31-48
@ ./src/index.tsx

解決方案：確保從ts-loader規則中排除node_modules 。

// webpack.config.js
{
    module: {
        rules: [
            {
                test: /\.(js|jsx|tsx|ts)$/,
                exclude: /node_modules/, // <--- make sure this is here!
                // ...
            }
        ]
    }
}