Как конфиг уменьшенная React + ReactDOM с Webpack

После слишком много неудачных испытаний мой вопрос: Что такое правильный способ установки Webpack так, что:Как конфиг уменьшенная React + ReactDOM с Webpack

Используйте react.min.js + реагировать-РОМ .min.js - не устанавливаемые источники npm
Не разбирайте и не коммите их, просто связывайте с моими собственными компонентами.
Переменные «React» и «ReactDOM» могут использоваться из всех файлов .jsx.

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

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

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

источник

2016-01-26 Paapaa

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

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

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

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 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.

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

Для example:

{ 
    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 будет выглядеть примерно так (непроверенный):

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

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

источник

2016-01-26 16:03:03 rossipedia

Спасибо, попробуй! Есть ли способ выполнить все это, не используя теги

Как конфиг уменьшенная React + ReactDOM с Webpack

ответ

Смежные вопросы