@ babel / typcript не выдает ошибок при сборке webpack - PullRequest
Новая
       9

@ babel / typcript не выдает ошибок при сборке webpack

0 голосов
/ 13 февраля 2019

Я пытаюсь перенести TypeScript с предустановкой Babel 7 @ babel / typcript.Он работает нормально, но по какой-то причине в консоли сборки нет сообщений об ошибках от TS.

У меня есть следующая конфигурация:

webpack.config.js 

const outputPath = require('path').resolve(__dirname, './production');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: [
    './src/index.tsx'
  ],

  output: {
    path: outputPath,
    filename: '[name].[chunkhash].js',
  },

  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'source-map-loader',
        enforce: "pre"
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'file-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ],

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

  devServer: {
    contentBase: outputPath
  }
};

.babelrc 

{
  "presets": [
    "@babel/preset-env",
    "@babel/typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "@babel/plugin-transform-runtime",
  ]
}

tsconfig.json 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "./production/",
    "sourceMap": true,
    "noImplicitAny": true,
    "lib": ["esnext", "dom"]
  },
  "include": [
    "./src/**/*"
  ]
}

И вывод: 

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/me/projects/react/production
ℹ ｢wdm｣: Hash: 1186927fe343142edc70
Version: webpack 4.29.3
Time: 1120ms
Built at: 2019-02-13 19:41:10
                       Asset       Size  Chunks             Chunk Names
                  index.html  433 bytes          [emitted]  
main.3bb79f4b9e2925734f50.js   1.64 MiB    main  [emitted]  main
Entrypoint main = main.3bb79f4b9e2925734f50.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx 40 bytes {main} [built]
...
ℹ ｢wdm｣: Compiled successfully.

Он говорит, что ошибок нет.Но в коде есть ошибки TS.

Если я изменю babel-loader на ts-loader, у меня будет: 

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/me/projects/react/production
✖ ｢wdm｣: Hash: 90ec6ae13f842d672d2d
Version: webpack 4.29.3
Time: 1941ms
Built at: 2019-02-13 19:42:35
                       Asset       Size  Chunks             Chunk Names
                  index.html  433 bytes          [emitted]  
main.90f2073400581ecd9e5b.js   1.59 MiB    main  [emitted]  main
Entrypoint main = main.90f2073400581ecd9e5b.js

...

ERROR in /Users/me/projects/react/src/actions/index.ts
./src/actions/index.ts
[tsl] ERROR in /Users/me/projects/react/src/actions/index.ts(3,28)
      TS7006: Parameter 'type' implicitly has an 'any' type.

ERROR in /Users/me/projects/react/src/actions/index.ts
./src/actions/index.ts
[tsl] ERROR in /Users/me/projects/react/src/actions/index.ts(3,34)
      TS7019: Rest parameter 'argNames' implicitly has an 'any[]' type.

...

ℹ ｢wdm｣: Failed to compile.

Итак, ts-loader показывает ошибки.

Как включить сброс ошибок для @ babel / typescript?

1 Ответ

0 голосов
/ 13 февраля 2019

Насколько я понимаю, команда Babel отключила проверку типов во время разработки:

https://iamturns.com/typescript-babel

Как Babel обрабатывает код TypeScript?Он удаляет его.

Да, он удаляет весь TypeScript, превращает его в «обычный» JavaScript и продолжает свой веселый путь.

Но есть обходной путь с fork-ts-checker-webpack-plugin

Просто установите его как зависимость 

npm install --save-dev fork-ts-checker-webpack-plugin

и обновите конфигурацию вашего веб-пакета: 

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const webpackConfig = {
  ...
  plugins: [
    new ForkTsCheckerWebpackPlugin()
  ]
};

После этого у вас будет статическая проверка типов, выполняемая в отдельном процессе, что является фантастическим, поскольку ускоряет вашу сборку.

...