Блог

Мне трудно подключить компоновщик Typescript в моем проекте Webpack.

По-видимому eslint-loader , устарело, они дают eslint-webpack-plugin в качестве альтернативы. Кроме того, я использую typescript-eslint/parser вместо tslint (устаревший) Проблема в том, что правила, которые я устанавливаю внутри моего .eslintrc.js , похоже, не учитываются. Я добавил простое правило, .eslintrc которое должно выдавать ошибку при использовании точки с запятой.

 export default class A {
  static yes = 'this is static'; // ";" <- should be invalidated by eslint
}
  

Мои зависимости:

 "@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
"eslint": "^7.11.0",
"eslint-webpack-plugin": "^2.1.0",
"ts-loader": "^8.0.6",
"typescript": "^4.0.3",
"webpack": "^4.41.3",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
  

Если я правильно понимаю, это должно работать следующим образом:

                                                         # # # # # # # # # # # # # # 
@typescript-eslint/parser --> eslint-webpack-plugin --> #                         # 
      (uses eslint?)        (replaces eslint-loader)    #       webpack v4        #
                                                        #  w/ webpack-dev-server  #
       typescript         -->       ts-loader       --> #                         #
                                                        # # # # # # # # # # # # # #
  

Примечание: я использую webpack-dev-server вместо webpack-cli команды serve, которая, похоже, пока не работает с webpack v5.

Команда, которую я запускаю для запуска сервера: webpack-dev-server --hot --inline

• структура проекта:

 ./
├─── src
│    └─── index.ts
└─── dist
     ├─── bundle.js
     └─── index.html <- imports bundle.js
  

• webpack.config.js:

 const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
    // publicPath: "/assets", // path of the served resources (js, img, fonts...)
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      files: 'src/**/*.ts',
    })
  ],
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}
  

• .eslintrc.js:

 module.exports = {
  root: true,
  env: {
    node: true,
  },
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  rules: {
    'semi': ['error', 'never'],
  },
  ignorePatterns: [ "dist/*" ],
}
  

• tsconfig.json:

 {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "dom",
      "dom.iterable",
    ]
  },
  "include": [
    "src/**/*.ts",
    "tests/**/*.ts",
  ],
  "exclude": [
    "node_modules"
  ]
}
  

Я столкнулся с аналогичной проблемой при попытке использовать файлы eslint-webpack-plugin with .vue .

Мое решение состояло в том, чтобы использовать extensions настройку вместо files . Попробуйте это:

 new ESLintPlugin({
  extensions: ['ts']
})
  

Я исправил это, и мой текущий объект параметров ESLintPlugin выглядит следующим образом:

 const lintJSOptions = {
  context: path.join(paths.context, paths.js),
  extensions: ['js', 'ts'],
  emitError: true,
  emitWarning: true,
  failOnWarning: false,
  failOnError: false,
  // Toggle autofix
  fix: false,
  cache: false,

  formatter: require('eslint-friendly-formatter'),
};
  

Надеюсь, это поможет.

PD: context свойство — это корневое расположение ваших файлов * .js или * .ts относительно вашего package.json файла, которое вы можете использовать path.resolve(__dirname, './src/scripts'); или где бы вы ни хранили свои скрипты.

Я столкнулся с той же проблемой при попытке настроить slit с помощью Webpack. Я решил это, используя переопределение конфигурации внутри Webpack

 plugins: [
    new ESLintPlugin({
      files: 'src/**/*.ts',
      "overrideConfig": {
        "extends": "eslint:recommended",
        "rules": { }
      }
    })
  ],
  

Вы можете найти его здесь, в официальной документации eslint
https://eslint.org/docs/latest/developer-guide/nodejs-api#-new-eslintoptions