Javascript 如何解决我的TypeScript/ESLint/Webpack传输问题_Javascript_Reactjs_Typescript_Webpack_Eslint

Javascript 如何解决我的TypeScript/ESLint/Webpack传输问题

javascript reactjs typescript webpack

Javascript 如何解决我的TypeScript/ESLint/Webpack传输问题,javascript,reactjs,typescript,webpack,eslint,Javascript,Reactjs,Typescript,Webpack,Eslint,我已经检查了几天多的其他线程；我在网上发现过几次相同的错误，但无法复制已发布的解决方案。事实上，有很多方法可以为每个不同的版本编写babel/webpack配置，但这并没有多大帮助。我正在运行Webpack、TS和ESLint。我能得到的“最佳情况”错误如下。我真的很想得到一些帮助[在许多事情中，我尝试将tsx转换为jsx，并使用jsx保留而不是反应终端编译器错误： ERROR in ./src/index.tsx Module build failed (from ./node_module

我已经检查了几天多的其他线程；我在网上发现过几次相同的错误，但无法复制已发布的解决方案。事实上，有很多方法可以为每个不同的版本编写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>

tsconfig.json

{
  "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. */
  }
}

{
    "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
    }
}

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'),
                        },
                    },
                ],
            }
        ]
    }
};

我得到了一个遵循官方文档的示例项目

进行以下更改：

将

webpack.config.tsx

重命名为

webpack.config.js

（它由节点运行，而不是由TypeScript运行）

安装

ts-loader

以传输.ts/.tsx文件：

npm-Install——保存dev-ts-loader

编辑

webpack.config.js

并配置ts加载程序

此示例还包括

babel加载程序

注意

exclude:/node_modules/，

和

configFile:path.resolve（'./tsconfig.json'），

行，它们很重要，需要正常工作（有关详细信息，请参阅下面的疑难解答部分）

编辑

tsconfig.json

并添加以下设置：

此时您应该有望构建项目：

npxwebpack

2.示例文件以下是我的测试项目的文件内容：

package.json

{
  "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. */
  }
}

{
    "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
    }
}

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'),
                        },
                    },
                ],
            }
        ]
    }
};

tsconfig.json

{
  "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. */
  }
}

{
    "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
    }
}

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'),
                        },
                    },
                ],
            }
        ]
    }
};

webpack.config.json

{
  "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. */
  }
}

{
    "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
    }
}

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'),
                        },
                    },
                ],
            }
        ]
    }
};

src/index.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')
);

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'
      }
    ]
  }
};

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

import Main from './Main';

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

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

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

解决方案：解析完整的

tsconfig.json

路径

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

错误：您会收到一个错误，如：

找不到模块：错误：无法解析项目/节点路径中的“…”模块/react“

e、 g

解决方案：确保从

ts加载程序

规则中排除

node\u模块

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

//webpack.config.js
{
模块：{
规则：[
{
测试：/\（js | jsx | tsx | ts）$/，
排除：/node_modules/，//将该tsx转换为jsx，或者停止使用“jsx”：“preserve”并使其生成“react”相反？我尝试了这两种方法，它们抛出了完全相同的错误，只是“tsx”被“jsx”更改了。protip：你是在使用create react app
进行构建，还是这是一个你从头开始建立的普通项目？它是从头开始建立的。好吧，它几乎可以工作。我没有遇到任何这些错误，但我遇到了一个pa在编译网页包时，从网页包中读取错误。它显示“意外标记”，听起来好像babel在传递给它的保留jsx语法上失败了。您是否已将babel配置为使用@babel/preset react
？是的，我有@babel react、env和typescript。我不确定是什么，过几天我会再次检查。我问：我是一个前老师，做了一个配置（其实看起来100%都一样），它很有效，所以我坚持这个观点。我花了大约4天的时间来尝试配置这个。