#reactjs #webpack #babeljs
#reactjs #webpack #babeljs
Вопрос:
Есть ли причина хранить предустановку Babel в .babelrc , а webpack.config.js не отдельно от возможности повторного использования .babelrc файла в другом проекте?
У меня есть приложение, которое работает должным образом, используя следующий .babelrc файл:
{
"presets": ["es2015", "stage-0","react"]
}
Я изменил приложение на другую структуру Webpack без .babelrc файла. Вот это самое webpack.config.js :
module: {
loaders: [
{
test: /(.js|.jsx)$/,
exclude: /(node_modules)/,
loader: 'babel',
query: { presets: ['es2015', 'stage-0', 'react'] }
},
Как ни странно, приложение перестало работать из-за проблем с синтаксическим анализом JSX и import ключевых слов внутри моего server.js файла. Это работает только тогда, когда я добавляю обратно .babelrc файл. Кто-нибудь может, пожалуйста, объяснить, почему это работает только с .babelrc файлом?
Комментарии:
1. Похоже, ваш server.js файл не использует Webpack, но полагается на babel-node / babel-register?
2. server.js файл использует Webpack.config
3. На самом деле я не знаю, что вы имеете в виду, но вы можете быть на что-то, как я нашел строку require (‘babel-core / register’) в файле сервера, но в то же время Он связывает (т.е. импортирует) файл webpack.config
4. Когда вы говорите, что он «использует» Webpack, вы имеете в виду server.js это пакет, сгенерированный Webpack, или вы имеете в виду server.js требуется в
webpack.config.js?5. Второй, server.js требует webpack.config.js
Ответ №1:
Измените свой загрузчик на babel-loader в вашем webpack.config.js , а перед этим вам нужно установить их с помощью
npm install babel-loader babel-core babel-preset-es2015 --save-dev
Также убедитесь, что вы установили babel-preset-react
команда
webpack.config.js
module: {
loaders: [
{
test: /.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy'],
}
}
]
},
Комментарии:
1. нет, к сожалению, это не ответ, поскольку он по-прежнему ничего не делает. У меня есть другие приложения, которые используют babel, подобные приведенному выше, а не babel-loader, и они все еще работают.
2. проверьте обновление вот как я использую модуль webpack, и он работает для меня. дайте мне знать, если это работает сейчас
3. нет, я добавил эти плагины, но он все еще настаивает на том, чтобы я вставил файл .babelrc.
4. ошибка заключалась в синтаксической ошибке, связанной с jsx и ‘import’ в качестве ключевого слова. Но обнаружил кое-что новое — мой оригинальный server.js файл содержал require(‘babel-core / register’), и у меня должен быть файл .babelrc для работы, однако, когда я изменил свой server.js файл, удалив ‘require(‘babel-core / register’)’; приложение работало, когдаЯ удалил .babelrc . Я действительно не понимаю, почему, я предполагаю, что babel rc означает babel register-core, поэтому требование означает, что у меня должен быть файл .babelrc
5. да, require(‘babel-core / register’) использует .babelrc с определенными в нем предустановками. Так вот в чем причина проблемы. Хорошо, что сейчас она решена
Ответ №2:
В вашей конфигурации webpack вместо передачи query опции вы можете настроить параметры babel, используя babel ключевое слово:
babel: {
babelrc: false,
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy']
},
modules: {
loaders: [
...
]
}
Похоже, это устранило проблему для меня. К сожалению, я точно не знаю, почему это работает:-(
Вы можете видеть, что некоторые тесты babel-loader используют это для настройки параметров: https://github.com/babel/babel-loader/blob/master/test/options.test.js#L70