Импорт приложения реакции в существующий проект Webpack

Question

У меня есть приложение Rails, которое использует Webpack для объединения своих ресурсов. В настоящее время он не использует React.

В отдельном репозитории я создал приложение React. Это приложение React в основном реализует сложный элемент пользовательского интерфейса. План состоит в том, чтобы я мог импортировать этот реагирующий компонент в свое основное приложение.

Пока что я добавил git-репо в мой файл package.json и вижу, что исходный код моего приложения реакции загружается в папку /node_modules.

Я могу заставить Webpack связать приложение, добавив:

В приложение React package.json:

"prepare": "npm run build"

А в моем основном приложении webpack.config

module.exports = {
  ...
  resolve: {
     ...
     alias: {
        MyReactApp: 'my-react-app/dist/bundle.js'
     }
  }
}

Но похоже, что он объединяет все библиотеки, которые мое приложение React использует внутри bundle.js, и не добавляет их в дерево зависимостей.

Похоже, что команда prepare в основном объединяет мое приложение React в файл /dist/bundle.js, а Webpack просто включает этот файл как есть. Мне нужен Webpack для управления зависимостями моего приложения React, чтобы у меня не было ненужных библиотек, дублированных в окончательном выводе Webpack.

Есть ли лучший способ достичь того, чего я пытаюсь достичь?

Answer 1

Лучше связать их вместе.По сути, он пытается связать уже связанный код.Это может работать:

resolve: {
    alias: {
       MyReactApp: 'my-react-app/index.js'
    }
}

index.js должен быть главной отправной точкой jsx.

Кроме того, вам нужно добавить правила компиляции для файлов jsx, я никогда не связывал Rail-приложения, но React-приложения выследует выполнить следующие действия:

1. Добавить правило в webpack.config.js

   module: {
    rules: [
      {
        // this is so that we can compile any React,
        // ES6 and above into normal ES5 syntax
        test: /\.(js|jsx)$/,
        // we do not want anything from node_modules to be compiled
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      ...
    ]
   }
   

2. Установить модули Babel:

   npm install @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader
   

3. создайте файл с именем .babelrc и вставьте следующий код

   {
     "presets": ["@babel/env", "@babel/react"],
     "plugins": ["@babel/plugin-proposal-class-properties"]
   }
   

4. Запустите webpack через babel-node, как показано в следующем сценарии

   "webpack": "babel-node ./node_modules/webpack/bin/webpack"
   

Это мой подход к решению этой проблемы.Он по-прежнему будет реагировать на ваш проект.Но вместо добавления скомпилированного проекта он добавит файлы jsx и скомпилирует их во время процесса связывания.

Примечание:

• babel / core этоиспользуется для компиляции ES6 и выше в ES5
• babel / node , это используется для того, чтобы мы могли импортировать наши плагины и пакеты внутри webpack.config.js, а не требовать их (это просто что-точто мне нравится, и, возможно, вам это тоже понравится)
• babel / preset-env это определит, какие преобразования или плагины использовать, и полифилы (то есть предоставляет современные функциональные возможности в старых браузерах)которые изначально не поддерживают его) на основе матрицы браузера, которую вы хотите поддерживать
• babel / preset-response это скомпилирует код React в код ES5
• babel-loader это помощник Webpack, который преобразует ваши зависимости JavaScript с помощью Babel (т.е. преобразует операторы импорта
  в требуемые)