babel-loader не транспилирует пакеты в node_modules даже после указания в блоке exclude игнорировать пакет (lerna)

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

теперь все эти общие модули/компоненты являются модулями es6. которые не транспилируются. потому что общие модули также постоянно развиваются. и если мы создадим/перенесем их, я уверен, что HMR не будет работать после этого (дикое предположение). Ниже приведена моя структура каталогов.

package.json lerna.json |--packages |--common |--react-app |--constants |--utilities

common содержит общие элементы реакции, такие как table,accordion и т. д., которые экспортируются как модули es6 по умолчанию.

react-app импортирует common как dependency. react-app настроена конфигурация сборки веб-пакета.

теперь, когда я импортирую модуль common в мой react-app babel transform, происходит сбой с этой ошибкой

Button.component.jsx 7:19
Module parse failed: Unexpected token (7:19)
You may need an appropriate loader to handle this file type.
| const { Search } = Input;
| class TextBoxWithButton extends React.Component {
>   static propTypes = {
|     placeholder: PropTypes.string.isRequired,
|     onAction: PropTypes.func.isRequired,
 @ ./src/App/Modules/Todo/Components/Header/Header.component.jsx 10:0-111 16:25-41
 @ ./src/App/Modules/Todo/Todo.component.jsx
 @ ./src/App/Router/index.jsx
 @ ./src/App/Layout/index.jsx
 @ ./src/App/index.jsx
 @ ./src/App.hot.js
 @ ./src/index.jsx

что означает, что babel-loader не может анализировать и транспилировать то, что находится в папке node_nodules, что имеет смысл, поскольку ожидается, что все зависимости уже транспилированы. но не всегда. если вы управляете локальными зависимостями, вы не можете постоянно их строить (я так думаю)

теперь я нашел в Интернете несколько решений, которые позволяют 1bable-loader не исключать node_modules или игнорировать @mypackagein exclude regex. но ничего не работает в моем случае.

вот что я пробовал до сих пор.

  1. удалить exlucde: /node_modules/ из babel-loader => не работает
  2. используйте require.resolve('babel-loader') => не работает
  3. добавить resolve.symlinks= false.
  4. добавить resolve.modules='node_modules' или path.resove(__dirname,'node_modules') => не работает
  5. добавить путь пакетов к babel-loader включить include: [srcPath, lernaPackagesPath],

ничего не работает. есть что-то, чего мне не хватает? вот ссылка на мой тестовый репозиторий git.


babeljs babel-loader webpack-4 lerna
person hannad rehman    schedule 08.09.2018    source источник
comment
Нет времени отвечать, но к вашему сведению: github.com/babel/babel /issues/8651#issuecomment-419601535   -  person loganfsmyth    schedule 08.09.2018
comment
@loganfsmyth поделитесь своим ответом. я потратил достаточно времени на это   -  person hannad rehman    schedule 08.09.2018

Ответы (1)


arrow_upward
4
arrow_downward

babel-loader по умолчанию не будет транспилировать ничего из node_modules. вы можете явно указать, что транспилировать в node_modules, но после @babel7.0.0 это тоже не работает. есть также область .babelrc, которая была введена в @babel7.0.0.

согласно исследованию, которое я провел при нормальных обстоятельствах, node_modules ожидаю транспилировать commonjs или umd модулей. который может быть импортирован любым приложением. в моем случае мои пакеты/компоненты, где все es6 модулей, которые необходимо было перенести. и моя сборка веб-пакета не удалась, потому что babel-loader просто игнорировал их.

поэтому я решил использовать @babel/cli для переноса каждого пакета, в котором находятся мои компоненты. Мне пришлось добавить .babelrc вместе с другими конфигурациями в мои пакеты компонентов и собрать их с помощью @babel/cli

вот scripts в моем package.json

"scripts": {
    "start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
  },

и после этого мой package.json выглядит примерно так

{
  "name": "@pkg/components",
  "version": "1.0.1",
  "description": "a repository for react common components. may or may not be dependent on elements",
  "main": "dist/index.js",
  "author": "hannad rehman",
  "license": "MIT",
  "scripts": {
    "start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
  },
  "dependencies": {
    "@pkg/constants": "^1.0.1",
    "@pkg/elements": "^1.0.1"
  },
  "peerDependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-router-dom": "^4.3.1"
  }
}

с этим подходом. все мои общие пакеты будут протестированы, проверены и собраны до того, как какое-либо приложение сможет их импортировать. babel имеет режим наблюдения, который гарантирует, что транспиляция будет происходить всегда, когда происходит изменение.

наконец, и самое главное, react HMR работает как положено.

ОБНОВЛЕНИЕ

приведенное выше решение определенно работает, но через несколько месяцев я изменил его, используя свойство include в загрузчике babel.

{
      test: /\.js(x?)$/,
      include: [/node_modules\/@pkg/],
      use: [
        'thread-loader',
        {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            configFile: path.resolve(
              __dirname,
              '../../../../',
              `${env.appConfig.folderSrc}/babel.config.js`,
            ),
          },
        },
      ],
    }
person hannad rehman    schedule 12.09.2018