Как настроить Babel 6 stage 0 с помощью React и Webpack
Я вижу, что Babel 6 имеет три предустановки: es2015, реагирует и stage-x. Я прочитал, что я могу установить те, в.babelrc
вот так:
{
"presets": ["es2015", "react", "stage-0"]
}
или прямо в package.JSON так:
{
...,
"version": x.x.x,
"babel": {
"presets": ["es2015", "react", "stage-0"]
},
...,
}
Я также могу использовать Babel-Loader с Webpack следующим образом:
loader: 'babel?presets[]=es2015'
Таким образом, чтобы собрать все красиво и чисто, я добавляюbabel-loader
, который был только что обновлен для работы с Babel6, до конфигурации webpack следующим образом:
module.exports = function(options) {
var jsLoaders = ['babel?presets[]=es2015'];
[...]
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: jsLoaders
},
{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders)
},
[...]
Теперь, когда я собираюбез .babelrc
в корне или предустановленные параметры, установленные вpackage.JSON
, то есть только с предустановкой babel-loader es2015, установленной в конфигурации webpack, я получаю неожиданную ошибку токена о статических propTypes в моем классе компонентов React:
ERROR in ./app/components/form/index.jsx
Module build failed: SyntaxError: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: Unexpected token (19:19)
17 | // ES6 React Component:
18 | export default class SurveyForm extends Component {
> 19 | static propTypes = {
| ^
На GitHub мне сказали, что этоstage-1
особенность, а именноtransform-class-properties
, Поэтому я хотел бы реализоватьstage-0
сразу.
НО
Когда я делаю это, добавляя.babelrc
или определяющийpackage.JSON
как и выше, я получаю очень странную ошибку сбоя сборки:
ERROR in ./app/components/form/index.jsx
Module build failed: Error: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
at NodePath.insertAfter (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/modification.js:181:13)
at NodePath.replaceWithMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/replacement.js:92:8)
at handleClassWithSuper (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:80:10)
at PluginPass.Class (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:101:11)
at newFn (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/visitors.js:233:27)
at NodePath._call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:72:18)
at NodePath.call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:44:17)
at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:102:12)
at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
at TraversalContext.visitSingle (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:111:19)
at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:195:19)
at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:106:22)
at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
at TraversalContext.visitMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:106:17)
at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:193:19)
at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
@ ./app/index.jsx 9:0-28
Или вкратце:Module build failed: Error: /.../index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
Вот где я застрял. Я написал этот компонент с Babel5, когда мне удалось скомпилировать с babel-loader вот так, и все работало нормально:
loader: 'babel?optional[]=runtime&stage=0
Теперь я получаю упомянутые ошибки компиляции.
Этоbabel-loader
выпуск илиbabel
вопрос?Где я должен настроитьstage-0
чтобы не было ошибок?При компиляции с установленными пресетами и использовании упомянутого обходного пути для ошибки экспорта класса (не следует экспортировать класс до тех пор, пока он не будет создан), порядок набора пресетов изменяет сообщение об ошибке. Когда я установилstage-0
Сначала ошибка сейчас'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)
Когда я положилstage-0
Второй или третий я получаю сообщение об ошибке синтаксиса сверху.
Для последних достижений в отношении этих ошибоксмотри мой пост или женовый трекер выпуска бабел на фабрикаторе для большего.(В основном компиляция исправлена в 6.2.1, но сейчас происходят другие вещи)
Все ошибки, упомянутые в этой статье, полностью исправлены с Babel 6.3.x. Пожалуйста, обновите ваши зависимости, если у вас все еще есть проблемы.