babel-загрузчик не переносит пакеты в node_modules, даже после указания в блоке exclude игнорирования пакета (lerna) - PullRequest
Новая
       65

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

0 голосов
/ 08 сентября 2018

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

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

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

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

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

теперь, когда я импортирую 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, что имеет смысл, поскольку ожидается, что все зависимости уже будут перенесены. но не всегда. если вы управляете локальными зависимостями, вы не можете постоянно создавать их (я так думаю)

теперь я нашел в сети некоторые решения, которые позволяют 1 bable-loader не исключать node_modules или игнорировать @mypackage в исключающем регулярном выражении. но ничего не работает в моем случае.

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

  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 test repo.

1 Ответ

0 голосов
/ 12 сентября 2018

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

согласно исследованию, в котором я провел при нормальных обстоятельствах node_modules ожидали, что транспортировали commonjs или umd модули. которые могут быть импортированы любым приложением. в моем случае мои пакеты / компоненты, где все es6 модули, которые нужно было транспортировать. и моя сборка webpack не удалась, потому что 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 имеет режим просмотра, который гарантирует, что транспиляция происходит всегда, когда происходит изменение.

последний и самый важный ответ HMR работает как положено.

UPDATE

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

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