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的行将变为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转换的一部分（例如const movies = [ [`Harry Potter and the Philosopher's Stone`, 125000000, `dCtFvscYcXQKTNvyyaQr2g2UacJ`, 152, 2001, `Let the Magic Begin`], [`Harry Potter and the Chamber of Secrets`, 100000000, `sdEOH0992YZ0QSxgXNIGLq1ToUi`, 161, 2002, `Hogwarts is back in session`], [`Harry Potter and the Prisoner of Azkaban`, 130000000, `jUFjMoLh8T2CWzHUSjKCojI5SHu`, 141, 2004, `Something wicked this way comes`], [`Harry Potter and the Goblet of Fire`, 150000000, `6sASqcdrEHXxUhA3nFpjrRecPD2`, 157, 2005, `Dark And Difficult Times Lie Ahead`], [`Harry Potter and the Order of the Phoenix`, 150000000, `4YnLxYLHhT4UQ8i9jxAXWy46Xuw`, 138, 2007, `Evil Must Be Confronted`], [`Harry Potter and the Half-Blood Prince`, 250000000, `bFXys2nhALwDvpkF3dP3Vvdfn8b`, 153, 2009, `Dark Secrets Revealed`], [`Harry Potter and the Deathly Hallows: Part 1`, 250000000, `maP4MTfPCeVD2FZbKTLUgriOW4R`, 146, 2010, `One Way… One Fate… One Hero`], [`Harry Potter and the Deathly Hallows: Part 2`, 125000000, `fTplI1NCSuEDP4ITLcTps739fcC`, 130, 2011, `It all ends here.`] ]; //quickest way. let filteredArray = movies.map( innerArray => innerArray[2]); //using for each let filteredArrayFor =[]; let filter = () => { for (let j = 0; j < movies.length; j++) { filteredArrayFor.push(movies[j][2]); } } console.log(filteredArray); filter(); console.log(filteredArrayFor);）。我怀疑在第一种情况下，webpack不知道什么是“反应”，因此它没有做任何事情来最小化对其的引用。在第二种情况下，webpack确实知道它是什么，因此它可以更智能地处理它并适当地缩小它。

Answer 2

这是因为react是react-dom中的peer dependency；您可以在react-dom的{{1}}中看到它。换句话说，package.json在内部使用react代码，并希望您使用的react-dom版本与react中的版本兼容，因此不会安装{ {1}}本身。

这与webpack有什么关系？嗯，webpack将使用package.json或react，这取决于您是处于开发还是生产模式。这两个文件中的代码即使使用了react，也无法理解react语法，因为它们是使用~/node_modules/react-dom/cjs/react-dom.development.js生成的，并且~/node_modules/react-dom/cjs/react-dom.production.min.js在以下列表中被列为 peer依赖该文件。

如果~/node_modules/react-dom/package.json不是react的同伴依赖，而是正常依赖，那么您可以跳过{{1 }}，但是如果使用其他版本的react还有其他依赖项，就会遇到问题。

最后，您在webpack生成的捆绑文件中看到的内容很大程度上取决于您使用的webpack版本。本质上，webpack会创建依赖项的对象（或取决于webpack版本的数组）。在您的情况下，react-dom是持有所有依赖关系的对象，而import React from 'react'是指向做出反应的关键。您可以在此guide中找到有关webpack内部的更多详细信息。

Webpack为什么要注入React

2 个答案: