Зачем Webpack вводить React

Question

В моем файле входа для веб-пакета у меня есть это:

import ReactDOM from 'react-dom';
import Layout from './components/Layout';

// ...
dialog = document.createElement("dialog");
ReactDOM.render(<Layout dialog={dialog} />, dialog);

Это компилируется в React.createElement(o,{dialog:u})

Мой сценарий затем жалуется, что React не определено, так как я неимпортировал его.

Между тем, если я добавлю import React from 'react'; вверху файла, строка, упакованная в Webpack, превратится в i.a.createElement(o,{dialog:u}).

С какой стати она будет использовать React.createElementв случае, если я не импортирую React вручную?

Моя конфигурация Webpack:

const path = require('path');
const os = require('os');

const PLUGINDIR = `${os.homedir()}/Library/Application\ Support/Adobe/Adobe\ XD\ CC/develop/ea44acd5/`;
module.exports = {
  entry: './src/main.js',
  mode: 'production',
  output: {
    path: path.resolve(PLUGINDIR),
    filename: 'main.js',
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        plugins: [
          "transform-react-jsx"
        ]
      }
    }, {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }]
  }
};

Answer 1

Это потому, что react является зависимостью пира от react-dom;Вы можете видеть это в react-dom package.json.Другими словами, react-dom использует внутренний код реагирования и ожидает, что вы используете версию react, совместимую с версией, которую он имеет в package.json, он не будет устанавливать версию react сам по себе.

Какое это имеет отношение к веб-пакету?Ну, веб-пакет будет использовать либо ~/node_modules/react-dom/cjs/react-dom.development.js, либо ~/node_modules/react-dom/cjs/react-dom.production.min.js, в зависимости от того, находитесь ли вы в режиме dev или prod.Код в этих 2 файлах, даже несмотря на то, что они используют реагирование, не будет понимать синтаксис реагирования, потому что они были созданы с использованием ~/node_modules/react-dom/package.json, а react указан в этом файле как равноправная зависимость .

Если бы react не было зависимостью равноправных из react-dom, а скорее нормальной зависимостью , то вы могли бы пропустить import React from 'react', но тогда вы 'Если у вас есть другие зависимости, использующие разные версии react.

, то, наконец, то, что вы увидите в комплекте файла, созданного webpack, во многом зависит от используемой версии webpack.По сути, webpack создает объект (или массив в зависимости от версии webpack) зависимостей.В вашем случае i будет объектом, содержащим все зависимости, а a будет ключом, указывающим на реакцию.Вы можете найти более подробную информацию о внутренних пакетах в этом руководстве .

Answer 2

Webpack не вставляет "React.createElement".Бабель делает это как часть преобразования JSX (например, <Layout .../>).Я подозреваю, что в первом случае webpack не знает, что такое «React», поэтому он ничего не делает для минимизации ссылок на него.Во втором случае webpack знает, что это такое, поэтому он может более разумно с ним справиться и соответствующим образом минимизировать его.