Webpack / Babel не обнаруживает ошибки javascript перед транспилированием

Я настроил webpack-dev-server для нового проекта React. Я использую babel-loader для переноса кода ES6. В предыдущих проектах мы могли обнаруживать очевидные ошибки в нашем коде javascript до транспиляции, например, отсутствующие операторы импорта или неопределенные переменные.

Почему webpack / babel-loader не обнаруживает очевидных ошибок? И как я могу настроить babel-loader, чтобы не переносить эти ошибки и вместо этого регистрироваться в командной строке?

Вот мой package.json

{
  "name": "advent-calendar",
  "version": "1.0.0",
  "description": "",
  "main": "src/entry.js",
  "scripts": {
    "dev": "webpack-dev-server --config config/webpack.config.dev.js",
    "build:webpack": "cross-env NODE_ENV=production && webpack --config config/webpack.config.prod.js",
    "build": "npm run build:webpack --verbose --color",
    "test": "cross-env NODE_ENV=development ./node_modules/.bin/mocha --opts mocha.opts",
    "test:watch": "npm run test -- --watch",
    "lint": "npm run -s lint:css:raw ; npm run -s lint:js:raw",
    "lint:css": "npm run -s lint:css:raw",
    "lint:css:raw": "stylelint \"src/**/*.{css,less,scss}\"",
    "lint:js": "npm run -s lint:js:raw",
    "lint:js:raw": "eslint  \"src/**/*.js\"",
    "lint:js:raw:fix": "./node_modules/.bin/eslint --fix \"src/**/*.js\"",
    "lint:js:watch": "esw \"src/**/*.js\" --watchyar",
    "lint:watch": "npm run lint:js:watch"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.2",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "chai": "^4.1.2",
    "chai-enzyme": "^0.8.0",
    "cross-env": "^5.1.1",
    "css-loader": "^0.28.7",
    "enzyme": "^3.1.1",
    "enzyme-adapter-react-16": "^1.0.4",
    "eslint": "^4.10.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-chai-friendly": "^0.4.0",
    "eslint-plugin-eslint-comments": "^2.0.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "jsdom": "^9.9.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "mocha": "^4.0.1",
    "node-sass": "^4.6.0",
    "nyc": "~9.0.1",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "sass-loader": "^6.0.6",
    "simple-jsdom": "^3.0.0",
    "sinon": "^4.1.2",
    "sinon-chai": "^2.14.0",
    "style-loader": "^0.19.0",
    "stylelint": "^8.2.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "crypto-js": "^3.1.9-1",
    "css-reset": "^0.0.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-transition-group": "^2.2.1",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-saga": "^0.16.0"
  }
}

Это мой .babelrc

{
   "presets": [
      "es2015", 
      "react", 
      "stage-1"
   ]
}

Мой загрузчик файлов javascript

{
   test: /\.$|\.js$|\.jsx$/,
   exclude: /node_modules\/[^@]/,
   use: [{
     loader: 'babel-loader',
   }],
}

webpack babeljs babel-loader ecmascript-6 webpack-dev-server
person trevorgk    schedule 15.11.2017    source источник
comment
Какие типы ошибок вы имеете в виду? Вы не дали многого, чтобы продолжать. Что конкретно вы видели раньше, чего не видите сейчас? Также было бы полезно узнать, какую версию Webpack вы используете и у вас есть вся конфигурация.   -  person loganfsmyth    schedule 16.11.2017
comment
Спасибо за ответ. Например, опечатки в переменных не обрабатываются, и импорт не проверяется, если они существуют. Я также отредактировал свой ответ и добавил весь package.json   -  person trevorgk    schedule 16.11.2017
comment
Для импорта, возможно, вы используете ["es2015", {modules: false}], в другой конфигурации, чтобы Webpack сам обрабатывал модули? Также может быть, что ошибки, о которых вы обычно говорите, исходят от ESLint, что было бы целой отдельной конфигурацией. Webpack / Babel не проверяет общие опечатки, хотя, если Webpack обрабатывает модули, он может сообщить вам, существуют ли они?   -  person loganfsmyth    schedule 16.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

И как я могу настроить babel-loader, чтобы не переносить эти ошибки и вместо этого регистрироваться в командной строке?

Webpack-dev-server имеет достаточно конфигурации для регистрации ошибок, которая может быть предоставлена ​​в декларативном режиме.

Просто используйте следующий скрипт (назовите его run-dev.js и патч package.json соответственно) для запуска клиентской части:

import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';

import config from './webpack.dev.config';

const outputConfig = {
    colors: true,
    hash: false,
    version: false,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: true,
    errorDetails: true,
    warnings: true,
    publicPath: false
};

const clientCompiler = webpack(config);

const clientDevServer = new WebpackDevServer(clientCompiler, {
    stats: outputConfig
});

clientDevServer.listen(3000, '127.0.0.1');

Затем вы можете настроить outputConfig объект в зависимости от требований и степени подробности вывода. Не забудьте включить параметры errors и errorDetails, которые будут указывать на фрагменты и строки исходного кода с ошибками компиляции.

Режим чтения здесь https://webpack.js.org/configuration/stats/ о outputConfig конфигурации, включая шаблон фильтра для вывода ошибок, который можно использовать для исключения избыточного ведения журнала в консоли.

person Vladislav Ihost    schedule 16.11.2017
comment
Спасибо за ответ, я создал файл, но мне не удалось выполнить скрипт. Как мне выполнить его через package.json? - person trevorgk; 17.11.2017
comment
@trevorgk Замените в своем package.json строку "dev": "webpack-dev-server --config config/webpack.config.dev.js" на "dev": "babel-node run-dev.js" и не забудьте npm install --save-dev babel-cli - person Vladislav Ihost; 17.11.2017