#babeljs #webpack-4 #babel-loader #react-styleguidist
#babeljs #webpack-4 #babel-загрузчик #react-styleguidist
Вопрос:
Я обновил babel 6.x → 7.x
, но возникли проблемы с запуском Webpack.
Он жалуется на отсутствие core-js/modules/*
.
Мой babel.config.js
находится в корневом каталоге. Я преобразовал ранее существующий .babelrc
в js ( .babelrc
также выдал те же ошибки). Я предполагаю, что это какое-то столкновение со всеми основными, corejs2
, материалами времени выполнения.
В моем src есть два приложения, мое и Styleguidist (in ./node_modules
). Мое приложение переносится и работает с тем же package.json/babel.config, но Styleguidist этого не делает.
Ошибка при запуске Styleguidist с webpack:
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/project/src/node_modules/react-styleguidist/lib/client/rsg-components/Slot'
/node_modules/react-styleguidist/lib/client/rsg-components/Slot.js
:
import "core-js/modules/es.array.concat";
import "core-js/modules/es.array.filter";
...
package.json
"dependencies": {
"@babel/polyfill": "^7.0.0",
"@babel/runtime-corejs2": "^7.4.3",
}
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.4.3",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.0.0",
"@babel/plugin-transform-modules-commonjs": "^7.4.3",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/plugin-transform-runtime": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-vue-jsx": "^4.0.1",
}
babel.config.js
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-react-jsx',
'transform-vue-jsx',
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"],
comments: false
}
Комментарии:
1. Я посмотрел на Styleguidist’ package.json и увидел, что у них есть «core-js»: «^ 3.0.0». Я добавил это в свой package.json, и теперь он запускается!! Спасибо, я. Если кто-нибудь может объяснить мне причину 15 разных ядер и полизаполнений, я был бы признателен.
2. 2 приложения работают, но Jest не работает.
Ответ №1:
Цитата из Babel 7.4.0
выпуска :
@babel/polyfill — это не плагин или предустановка, а пакет времени выполнения: если бы мы добавили опцию для переключения между core-js @ 2 и core-js @ 3, обе версии пакета должны быть включены в ваш пакет. По этой причине мы решили отказаться от него: теперь вы должны загрузить core-js для полизаполнений и regenerator-runtime / runtime, если вы преобразуете генераторы:
Поскольку вы используете 7.4.3
версию babel, @babel/polyfill
она может работать не так, как ожидалось. Вместо этого, пожалуйста, добавьте core-js
и regenerator-runtime
вручную. Цитата из core-js3
объявления о выпуске:
Instead of
import "@babel/polyfill";
you should use those 2 lines:
import "core-js/stable";
import "regenerator-runtime/runtime";
Don't forget install those dependencies directly!
npm i --save core-js regenerator-runtime
Комментарии:
1. Этот ответ спас мой день.
2. Это было именно то, что мне было нужно.
Ответ №2:
У меня была такая же проблема, и, как это часто бывает, я забыл установить другой пакет как:
«@babel/runtime-corejs3»: «^ 7.5.5»,
Не забудьте установить его на том же уровне, на котором у вас возникла проблема (на уровне разработчика, локального или производственного):
npm i -D(or --save-dev) @babel/runtime-corejs3
Таким образом, в целом такого рода ошибки возникают, когда в версии происходят значительные изменения в зависимости от обновлений и они не совместимы с предыдущими версиями (изменения API). Действительно, corejs3 вообще не совместим с corejs2 или старше.
Комментарии:
1. Спасибо. Я просто забыл установить
npm install core-js@3 --save
, когда попытался установить"corejs": "3.21.1"
для@babel/preset-env
пресета внутриbabel.config.json
Ответ №3:
Я нашел возможный ответ. Чтобы устранить эту ошибку, вы можете понизить версию core-js до 2.5.7. Эта версия создает правильную структуру каталогов с отдельными папками ES6 и ES7.
Чтобы понизить версию, просто запустите:
npm i -S core-js@2.5.7