javascript - 为什么Webpack要注入(inject)React

Question

在我的 webpack 入口文件中，我有这个:

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'ed 行将变为 i.a.createElement(o,{dialog:u}) .

在我不手动导入 React 的情况下，它到底为什么要使用 React.createElement ？

我的 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

Webpack 没有插入“React.createElement”。 Babel 正在这样做，作为改造 JSX 的一部分(例如 <Layout .../> )。我怀疑在第一种情况下，webpack 不知道“React”是什么，因此它不会做任何事情来减少对它的引用。在第二种情况下，webpack 确实知道它是什么，因此它可以更智能地处理它并适本地缩小它。