React.js и webpack — почему он не разрешает var, let, const?

У меня есть небольшая проблема, до которой я не могу докопаться.

Вот фрагмент из моего файла Graph.js:

class Graph extends React.Component {
    @observable newTodoTitle = "";

    s = 40

Ошибка в веб-пакете выглядит следующим образом:

ERROR in ./src/components/Graph.js
Module build failed: SyntaxError: Unexpected token (13:6)
2018-01-11T14:56:05.221073500Z 
  11 | 
  12 | 
> 13 |   let s = 40
     |       ^

Если я уберу "let", он отлично скомпилируется!

Я бы предпочел сохранить var, let, consts и т. д., так как я хочу скопировать и вставить в этот файл много JavaScript без этих ошибок.

Вот мой .babelrc

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

А вот мой webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      use: ['babel-loader'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Любые идеи?


webpack reactjs javascript ecmascript-6 ecmascript-2017
person Eamorr    schedule 11.01.2018    source источник
comment
Вы уверены, что @observable правильно поддерживается?   -  person Anselm    schedule 11.01.2018
comment
@Ансельм большое спасибо. Да, все отлично компилируется, когда я удаляю строку let s = 40   -  person Eamorr    schedule 11.01.2018
comment
Возможно, я нашел свой ответ... stackoverflow.com/a/37840719/395974   -  person Eamorr    schedule 11.01.2018
comment
неправильный порядок пресетов, es2015 стоит сверху - не реагирует. он должен скомпилироваться до этого справа налево. также отсутствует плагин преобразования свойств класса, хотя он может быть охвачен этапом 1, поскольку теперь он является этапом 3.   -  person Dimitar Christoff    schedule 11.01.2018
comment
Вы также можете взглянуть на stackoverflow.com /вопросы/22156326/   -  person Gabriel Bleu    schedule 11.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы пытаетесь использовать предложение class-fields (этап 3 в настоящее время), которое вы для поддержки этого требуется преобразование свойств класса.

Как видно из документации, ваш синтаксис отключен.
Нет необходимости в каком-либо ключевом слове объявления переменных для полей класса.

Пример из документов:

class Counter extends HTMLElement {
  x = 0;

  clicked() {
    this.x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  connectedCallback() { this.render(); }

  render() {
    this.textContent = this.x.toString();
  }
}
person Sagiv b.g    schedule 31.01.2018