response-intl и babel не будут экспортировать сообщения, ошибка в пресетах - PullRequest
Новая
       7

response-intl и babel не будут экспортировать сообщения, ошибка в пресетах

0 голосов
/ 24 января 2019

Запуск пакета React и response-int с переводами в элементах FormattedMessage.Когда я пытаюсь запустить babel-plugin-реагировать-intl, который должен извлечь сообщения в / build / messages, с предустановками, которые являются «response-app» или «env», «реагировать», я либо получаю ошибки на недопустимых пресетах, либофункции стрелок.

Я пытаюсь извлечь сообщения response-intl в / build / messages /, используя babel-plugin-Reaction-intl.Я не могу заставить это работать с функциями стрелок, = () =>, потому что при использовании только предустановки «реакции-приложения» на .babelrc я получаю ошибку: 

ReferenceError: [BABEL] src\components\LocaleSelector\index.js: Unknown option: node_modules\babel-preset-react-app\index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

Когда я запускаю его спресеты "env", "реагировать" Я получаю синтаксическую ошибку для функций стрелок: 

SyntaxError: src/views/Header/index.js: Unexpected token (15:12)
  13 |  }
  14 |
> 15 |  toggleMenu = () => {
     |             ^
  16 |          document.body.classList.toggle('show-menu');
  17 |  };

Я пытался установить плагины, такие как "transform-es2015-arrow-functions", чтобы компенсировать без решения.

Я также пытался добавить пресеты stage-2 и т. Д., Но, по словам Бабеля, они устарели после версии 7.0.Мне удалось запустить сборку в один момент, но сообщения не были извлечены.

Ниже приведены мои package.json и .babelrc.

package.json 

{
    "name": "my-app",
    "version": "1.0.0",
    "private": true,
    "homepage": ".",
    "dependencies": {
        "axios": "^0.18.0",
        "glob": "^7.1.3",
        "intl-messageformat-parser": "^1.4.0",
        "mkdirp": "^0.5.1",
        "npm": "^6.6.0",
        "prop-types": "^15.6.2",
        "react": "^16.6.0",
        "react-addons-update": "^15.6.2",
        "react-axios": "^2.0.3",
        "react-bootstrap": "^0.32.4",
        "react-dom": "^16.6.0",
        "react-intl": "^2.8.0",
        "react-router-dom": "^4.3.1",
        "react-scripts": "2.1.1",
        "update": "^0.7.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "npm run build-messages && react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "build-messages": "set NODE_ENV=development&& babel ./src >NUL&&babel-node ./src/scripts/translate.js"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "babel-cli": "^6.26.0",
        "babel-plugin-react-intl": "^3.0.1",
        "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-es2017": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-react-app": "^7.0.0"
    }
}

.babelrc 

{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        [
            "transform-es2015-arrow-functions",
            "react-intl",
            {
                "messagesDir": "build/messages"
            }
        ]
    ]
}

Я могу сделать эту работу, удаливвсе функции стрелок и для связывания this в конструкторе, но это больше кода и больше работы.Я хотел бы, чтобы синтаксис работал.

Что здесь не так?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

С babel 7 вам нужно использовать

@ babel / plugin-offer-class-properties

с Babel 7, вы также должны обновить preset-env иpreset-response

.babelrc будет выглядеть как 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
        "transform-es2015-arrow-functions",
        "react-intl",
        {
            "messagesDir": "build/messages"
        }
    ]
  ]
}

add @ babel / preset-env, @ babel / plugin-Предложение-класс-свойства, @ babel / пресет-реакция в вашемЗависимости разработчиков

0 голосов
/ 24 января 2019

Из того, что я могу сказать из вашего примера, похоже, что вы используете не только функцию стрелки, но и функцию стрелки как свойство класса (поправьте меня, если я ошибаюсь, не стесняйтесь делиться большим количеством фрагмент вашего кода).

Поля класса в настоящее время не являются стандартными (почти! - этап 3 - https://github.com/tc39/proposal-class-fields). Если вы хотите использовать его так, как показывает ваш код, вы можете использовать плагин babel для предложения: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

В качестве альтернативы, вы можете определить свой метод следующим образом: 

toggleMenu () {
   document.body.classList.toggle('show-menu');
};
...