Question

使用Webpack并在React中构建应用。在我的所有文件中，我必须包括键入： var React = require('React'); 似乎是无用的重复。

我可以在webpack的配置文件中添加一些东西来导入/要求在我的所有文件中使用React吗？

Answer 1

您可以在需要时使用ProvidePlugin自动要求React。

只需添加到您的webpack配置文件：

var webpack = require('webpack');

module.exports = {
  // Your configuration stuff.
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ]
};

每次在文件中使用React时，都会自动执行/导入，而无需明确地执行此操作。

Answer 2

您只需要在入口点需要一次。虽然我不使用react，但我只使用Angular或我使用过的任何其他库。以下是它的外观示例：

// app.ts (my entry point) 
namespace app {
        "use strict";

        //////////// Conditional Requires for Development /////////////
        /* istanbul ignore if: only necessary for development environment */
        if (process.env.NODE_ENV === "development") {
            require("../src/index.html");
        }

        //////////// Require CSS /////////////////////////////////////
        require("../node_modules/codemirror/lib/codemirror.css");
        require("./main.css");

        //////////// Require Libraries ///////////////////////////////
        var angular: IAngularStatic = require("angular");
        require("../node_modules/angular-resource");
        require("../node_modules/angular-ui-codemirror");
        require("../node_modules/angular-sanitize");

        //////////// Initialize Angular //////////////////////////////
        angular.module("app", [
            "ui.codemirror",
            "ngResource",
            "ngSanitize"
        ]);

        //////////// Require Application Components //////////////////
        require("./components/durian.js");
        require("./components/testbox.js");
        require("./moreapplicationfiles/");
    }

这是一个文件，我将其用作所有必需库和应用程序文件的起点。

一旦Webpack将所有文件打包，它将按照我在此处列出的顺序执行此操作，因此只需将React放在使用React的所有应用程序文件之上，它们就会有访问所有React方法和属性。同样的建议适用于Flux，Redux，jQuery或任何其他库。当然，并不是所有的库都能与Webpack很好地搭配，但很少有人不这样做。

至于添加到配置文件...您还可以通过在“条目”中列出数组中的所有库来添加可包含JavaScript库的其他入口点。您只需要确保它首先打包这些库，因此请测试它们的顺序是否正确：

// In your webpack.config.js file

    {
        entry: [ "./node_modules/react", "./app.js"],
    }

Webpack自动要求所有文件中的文件......？

2 个答案: