ReactJS 'geliştirme modu' nasıl açılır / kapatılır?

ReactJS'nin prop doğrulama özelliği kullanılarak başlandı , bu dokümanlar performans nedenleriyle yalnızca 'geliştirme modunda' çalışıyor.

React, açıklama eklediğim belirli bir bileşenin özelliklerini doğruluyor gibi görünüyor, ancak açıkça 'geliştirme modunu' açtığımı hatırlamıyorum.

Geliştirme modunu nasıl tetikleyeceğimi / değiştireceğimi araştırmaya çalıştım, ancak hiç şansım olmadı.

Diğer yanıt, react'ten önceden oluşturulmuş harici dosyaları kullandığınızı varsayar ve doğru olsa da, çoğu insanın React'i bir paket olarak nasıl kullanacağı veya kullanması gerektiği bu değildir . Ayrıca her kütüphane tepki ve paketlemek en çok bu noktada da üretim sırasında kapalı dev zaman yardımcıları geçiş yapmak için aynı kongre dayanır. Sadece küçültülmüş reaksiyonu kullanmak, tüm bu potansiyel optimizasyonları da masada bırakacaktır.

Nihayetinde sihir process.env.NODE_ENV, kod tabanı boyunca referansları yerleştirme React'e iner ; bunlar bir özellik geçişi gibi davranır.

if (process.env.NODE_ENV !== "production")
  // do propType checks

Yukarıdakiler en yaygın kalıptır ve diğer kütüphaneler de onu takip eder. Bu kontrolleri "devre dışı bırakmak" için geçiş yapmamız gerekir NODE_ENV."production"

"Geliştirici modunu" devre dışı bırakmanın doğru yolu, seçtiğiniz paketleyicidir.

webpack

Web DefinePluginpaketi yapılandırmanızda şu şekilde kullanın:

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")
})

Browserify

Envify dönüşümünü kullanın ve tarayıcı doğrulama oluşturma adımınızı NODE_ENV=production( "set NODE_ENV=production"Windows'ta) ile çalıştırın.

Sonuç

Bu, tüm örneklerinin process.env.NODE_ENVdeğişmez dize ile değiştirildiği çıktı paketleri üretecektir :"production"

Bonus

Dönüştürülen kodu küçültürken "Ölü Kod Eliminasyonundan" yararlanabilirsiniz. DCE, minifier'in şunu fark edecek kadar akıllı olduğu zamandır: "production" !== "production"her zaman yanlıştır ve bu nedenle if bloğundaki herhangi bir kodu size bayt tasarrufu sağlayarak kaldıracaktır.

Evet, gerçekten iyi belgelenmemiş, ancak ReactJS indirme sayfasında geliştirme ve üretim modlarından bahsediyor:

React'in iki versiyonunu sunuyoruz: geliştirme için sıkıştırılmamış versiyon ve üretim için küçültülmüş versiyon. Geliştirme sürümü, yaygın hatalar hakkında ekstra uyarılar içerirken, üretim sürümü ekstra performans optimizasyonları içerir ve tüm hata mesajlarını çıkarır.

Temel olarak, React'in küçültülmemiş versiyonu "geliştirme" modudur ve React'in küçültülmüş versiyonu "üretim" modudur.

"Üretim" modunda olmak için küçültülmüş sürümü eklemeniz yeterli react-0.9.0.min.js

Bunu başka bir yere gönderdim ama açıkçası burası daha iyi bir yer olurdu.

React 15.0.1'i npm ile kurduğunuzu import react from 'react'veya React'in ham kaynağı olan react = require('react')çalışacağını varsayarsak ./mode_modules/react/lib/React.js.

React belgeleri, ./mode_modules/react/dist/react.jsgeliştirme ve react.min.jsüretim için kullanmanızı önerir .

Küçültmeniz /lib/React.jsveya /dist/react.jsüretim için yapmanız durumunda React, üretim dışı kodu küçülttüğünüze dair bir uyarı mesajı görüntüleyecektir:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

react-dom, redux, react-redux benzer şekilde davranır. Redux bir uyarı mesajı görüntüler. React-dom'un da öyle olduğuna inanıyorum.

Bu nedenle, üretim sürümünü kullanmanız için açıkça teşvik ediliyor /dist.

Ancak /distsürümleri küçültürseniz, webpack'in UglifyJsPlugin'i şikayet edecektir.

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

Bu mesajdan kaçınamazsınız çünkü UglifyJsPlugin tek tek dosyaları değil, yalnızca web paketi parçalarını hariç tutabilir.

Hem geliştirme hem de üretim /distversiyonlarını kendim kullanıyorum.

• Webpack'in yapacak daha az işi var ve biraz daha erken bitiyor. (YRMV)
• React belgeleri /dist/react.min.js, üretim için optimize edildiğini söylüyor . 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }Artı çirkinleştirmenin '/ dist / react.min.js` kadar iyi bir iş yaptığına dair hiçbir kanıt okumadım. Ortaya çıkan aynı kodu aldığına dair hiçbir kanıt okumadım.
• React / redux ekosisteminden 3 yerine çirkinlikten 1 uyarı mesajı alıyorum.

Web paketinin aşağıdaki /distsürümleri kullanmasını sağlayabilirsiniz :

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }

Web paketi tabanlı derleme için DEV ve PROD için ayrı webpack.config.js kurardım. Üretim için takma adı aşağıdaki gibi çözün

     alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
    }

Çalışan olanı buradan bulabilirsiniz

Bu ReactJS.NET / Webpack öğreticisi gibi bir şey üzerinde çalışıyorsanız, process.env'yi anlayabildiğim kadarıyla React geliştirme modunu açmak / kapatmak için kullanamazsınız. Bu örnek, doğrudan react.js'ye bağlantı verir (bkz. Index.cshtml ), bu nedenle URL'yi değiştirerek .min.js veya küçültülmemiş varyantı seçmeniz yeterlidir.

Neden böyle olduğundan emin değilim, çünkü örneğin webpack.config.js, externals: { react: 'React' }işi yapacağını ima eden bir yoruma sahip , ancak daha sonra devam ediyor ve doğrudan sayfaya tepki vermeyi içeriyor.

İçin sadece WebPack v4 kullanıcıları:

Belirtme mode: productionve mode: developmentsizin WebPack config belirleyecek process.env.NODE_ENVvarsayılan olarak DefinePlugin kullanarak. Ek kod gerekmez!

webpack.prod.js (dokümanlardan alınmıştır)

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

Ve JS'mizde:

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

Webpack Belgeleri: https://webpack.js.org/guides/production/#specify-the-mode

Webpack üzerinden çalışan bir manuel derleme süreci kullanıyorum, bu yüzden bu benim için iki aşamalı bir süreçti:

1. Ortamlar arası paketi kullanarak package.json'daki ortam değişkenini ayarlayın:

   "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

2. Ortam değişkenini kullanmak için webpack.config.js dosyasını değiştirin (bu, geliştirme veya üretim modunda olup olmadığımızı belirlemek için React'e aktarılır) ve geliştirme modundaysak üretilen paketi en aza indirmeyi devre dışı bırakın, böylece bileşenlerimizin gerçek isimleri. Biz kullanan WebPack en gerek optimizasyon bizim de mülk webpack.config.js bunun için dosyanın:

   optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5, React v16.9.19, ortamlar arası v7.0.0, düğüm v10.16.14