TLDR: Подробное пошаговое руководство руководство
Пара вещей изменилась, так как написание учебника, а именно следующие, являются критическими изменениями, если не указано иное, остальные шаги в учебнике одинаковы:
Вам нужно будет загрузить и использовать babel-cli, чтобы заставить работать вашу собственную команду сценария "lib" :
npm install --save-dev @babel/cli
Вам также понадобится скачать и использовать плагин @babel/plugin-transform-react-jsx в вашей пользовательской команде сценария "lib" для компиляции и преобразования кода React , начиная с Вавилонская версия 6 и выше больше не имеет собственных трансформаций для React . Это необходимо, если вы хотите поделиться своим пользовательским компонентом только с собственным JavaScript на npmjs для других.
npm install --save-dev @babel/plugin-transform-react-jsx
Обновите команду сценария " lib ", чтобы использовать плагин JSX-преобразования babel, указанный на шаге 2:
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"lib": "babel --plugins @babel/transform-react-jsx src/node_modules --out-dir lib --copy-files",
"test": "node scripts/test.js"
},
Примечание : Вам также не нужен файл .babelrc, указанный в руководстве, так как мы отредактируем файл webpack.config.js для правильной передачи JSX позже.
Шаги 1 - 3 позволят вам публиковать и делиться своим компонентом с другими, но вам все равно придется вносить изменения в вашу локальную разработку, и я опишу эти шаги ниже:
Для package.json вашего пользовательского компонента удалите расширение .js для точки входа "main", так как это вызовет следующую проблему . Например, вот мой пользовательский компонент package.json:
{
"private": true,
"name": "YourComponent",
"main": "./YourComponent"
}
Теперь, если вы попытаетесь скомпилировать и запустить ваше приложение локально, используя ваш пользовательский компонент, оно выдаст ошибку с жалобой на синтаксис JSX вашего пользовательского компонента :
SyntaxError: YourComponent.js: неожиданный токен (6: 6)
3 | render() {
4 | return (
> 5 | <div>
| ^
6 | { this.props.children }
7 | </div>
8 | )
Это потому, что вам нужно отредактировать файл webpack.config.js, чтобы использовать предустановки @babel/preset-env и @babel/preset-react babel. Итак, вы хотите добавить эту строку:
presets: ['@babel/preset-env', '@babel/preset-react'], вашему загрузчику для кода вашего приложения.
Для справки, вот соответствующий раздел моего кода (начинается со строки 329):
...
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
...
Теперь, если вы работаете локально, оно должно работать: npm run start
Это были основные шаги, которые помогли исправить мою жалобу JSX на локальный запуск, а также на передачу моего пользовательского компонента другим на npmjs. Я создал публичное git-репо с моим кодом и подробным пошаговым руководством, чтобы помочь другим, его можно найти здесь .
Надеюсь, это поможет!