Как настроить Minified React + ReactDOM с помощью Webpack

После многих неудачных испытаний мой вопрос: Каков правильный способ настройки Webpack, чтобы:

Используйте response.min.js + react-dom.min.js - не установленные источники npm
Не разбирайте/ком их снова, просто связывайте с моими собственными компонентами.
"React" и "ReactDOM" могут использоваться из всех файлов .jsx.

Учебники и руководства, которые я нашел, не сработали - или, возможно, я сделал некоторые ошибки. Обычно я получал ошибку в средствах разработчика браузера о недостающей переменной React.

Моя цель - просто сохранить время разбора/связывания. Теперь я разбираю React с нуля каждый раз, когда я связываю свое приложение. И это занимает десятки секунд на медленном компьютере. В режиме просмотра это быстрее, но я считаю, что я делаю ненужную работу.

Любые идеи с недавними версиями React?

Ответ 1

Предполагая, что у вас есть webpack.config.js, который выглядит примерно так:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    }
};

Вам просто нужно указать React и ReactDOM в качестве внешних зависимостей (из документов):

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            ...
        ]
    },
    externals: {
        // "node/npm module name": "name of exported library variable"
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

Ключевым моментом в разделе externals является то, что ключ - это имя модуля, который вы хотите ссылаться, а значение - это имя переменной, которую предоставляет библиотека при использовании в <script> ; тег.

В этом примере, используя следующие два тега script:

<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>

приводит к созданию двух составляющих верхнего уровня: React и ReactDOM.

С приведенной выше конфигурацией externals в любое время в вашем исходном коде есть require('react'), она вернет значение глобальной переменной React вместо того, чтобы связать реакцию с вашим выходом.

Однако для этого страница, содержащая ваш комплект, должна включать в себя ссылки на библиотеки (в данном случае React и react-dom), прежде чем включать ваш пакет.

Надеюсь, что это поможет!

* редактировать *

Хорошо, я понимаю, что вы пытаетесь сделать. Требуемый вариант конфигурации веб-пакета module.noParse.

Отключает синтаксический анализ webpack. Поэтому вы не можете использовать зависимости. Это может быть полезно для расфасованных библиотек.

Для пример:

{
    module: {
        noParse: [
            /XModule[\\\/]file\.js$/,
            path.join(__dirname, "web_modules", "XModule2")
        ]
    }
}

Таким образом, у вас будут файлы react.min.js, react-dom.min.js и jquery.min.js в некоторой папке (скажем ./prebuilt), а затем вы потребуете их, как и любой другой локальный модуль:

var react = require('./prebuilt/react.min');

И запись в webpack.config.js будет выглядеть примерно так (untested):

{
    module: {
        noParse: [
            /prebuilt[\\\/].*\.js$/
        ]
    }
}

Беспорядок [\\\/] предназначен для сопоставления путей как на Windows, так и на OSX/Linux.