Реагируйте на обновление с Babel 6 до Babel 7
Какие шаги будут предприняты для обновления с babel 6 до babel 7 существующего реактивного проекта?
Это старые зависимости:
"dependencies": {
.........
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "0.55.4",
"react-redux": "5.0.7",
"redux": "^4.0.0",
"redux-actions": "^2.6.1",
"redux-mock-store": "^1.5.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.1.0",
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "^7.4.0",
"gulp": "^3.9.0",
"gulp-eslint": "4.0.2",
"gulp-mocha": "6.0.0",
"jest": "^23.5.0",
.....
},
Какие шаги вы должны выполнить, чтобы сделать это обновление? Как должны выглядеть новые зависимости?
Мне не очень понятно (после прочтения документа babel), что я должен сделать, чтобы сделать это обновление, какие команды запустить и что следует добавить в зависимости и что в devDependencies.
Также мне не очень понятно, в чем разница между babel 6 и babel 7 в отношении того, что происходит с кодом JS в реактивно-нативном проекте.
Пожалуйста, не отвечайте просто ссылками на babel doc или на журнал изменений в оригинальной версии 0.57.
Мне понадобятся хотя бы несколько основных шагов для этого обновления и пример package.json проекта RN, основанного на babel 7.
3 ответа
Прочитав документы babel и babel-upgrade, я понял, что достаточно иметь все старые зависимости babel внутри devDependencies для моего проекта:
"dependencies": {
.........
"react": "16.3.1",
"react-native": "0.55.4",
},
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"react-native": "0.55.4",
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
},
1) я использовал npx а также babel-upgrade (npx уже включен в npm версии>= 5.2.0) Если у вас старше npm версии, которые вы должны установить npx во всем мире.
npx позволяет тебе бежать babel-upgrade без локальной установки.
2) я побежал npx babel-upgrade (без --write option), чтобы увидеть, как обновление повлияет на мой пакет.json deps)
3) я побежал npx babel-upgrade --write
4) Я установил версию RN на 0.57.1 и изменил зависимость предустановки babel с "babel-preset-react-native": "^5", чтобы "metro-react-native-babel-preset": "^0.45.0",а также .babelrc Конфигурация для:
{
"presets": ["module:metro-react-native-babel-preset"]
}
как написано в инструкциях журнала изменений RN.
Сейчас package.json выглядит так:
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1",
.......
}
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@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-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
}
Я не уверен, что все новые зависимости добавлены gradle-upgrade необходимы, но проект собирается и работает нормально для Android и IOS.
Если вы найдете и лучшее решение или улучшения для этого обновления Babel, пожалуйста, добавьте комментарий или добавьте новый ответ, я буду рад обновить мой ответ или принять новый лучший ответ.
Источники:
https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057
Использовать babel-upgrade.
Вы можете попробовать использовать babel-upgrade для автоматического обновления ваших зависимостей Babel.
Его очень легко использовать, даже не устанавливая его глобально.
Я рекомендую иметь чистый рабочий каталог (без неустановленных изменений) и просто выполнить следующую команду:
npx babel-upgrade --write
Это обновит ваш package.json и ваш .babelrc файлы с правильными версиями и пакетами Babel.
В --writeкоманда просто указывает инструменту сохранить изменения на диск. Вот почему я предложил создать чистый рабочий каталог, чтобы вы могли просматривать изменения с помощьюgit diff. Если вы опустите--write он просто покажет желаемые изменения в консоли.
Вы можете увидеть больше информации на https://github.com/babel/babel-upgrade.
Для тех, кто столкнется с этой проблемой в 2021 году:npm install --save-dev @babel/core @babel/cli