Biến môi trường với webpack trên dev và sản xuất

Question

Tôi khá mới với thế giới sử dụng các công cụ xây dựng như Webpack và người thân của nó, vì vậy có thể câu hỏi này hơi ngớ ngẩn nhưng hãy hiểu tôi.

nền: Tôi đang phát triển ứng dụng web phía khách hàng (sử dụng reactjs + redux) và sử dụng webpack làm công cụ xây dựng và trình tải dev-server của tôi. Ngay bây giờ tôi phải thực hiện một số dòng mã chỉ trong môi trường dev (đăng nhập và các công cụ). Vì vậy, tôi thấy trên mạng việc sử dụng webpack.DefinePlugin plugin để đặt biến process.env.NODE_ENV và mã là như thế này:

plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
     }) 
] 

Sau đó, nếu các varibale NODE_ENV không được thiết lập trên máy tính của tôi (mà không phải là ở thời điểm hiện tại) nó tự động thiết lập để phát triển. Tôi có đúng không?

Còn máy sản xuất thì sao? tôi có cần đặt biến env này thành 'sản xuất' trong tệp /etc/environment không?

Sau đó, một câu hỏi khác là cách webpack biết NODE_ENV là gì khi tôi phân phát ứng dụng? liệu nó có được biên dịch khi tôi thực hiện việc xây dựng trên máy sản xuất và đặt trong bundle.js được xây dựng không? ($ webpack --progress -p)

Một câu hỏi khác là làm cách nào để bật/tắt tính năng trong môi trường sản xuất hoặc phát triển? chỉ cần thực hiện một tuyên bố nếu điều kiện như thế này:

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

Và điều cuối cùng, nếu đây là những gì webpack thực sự làm, thì nó sẽ chuyển đoạn mã này vào bundle.js được xây dựng? nếu vậy, nó có thể nhìn thấy người dùng cuối phải không? có gì để làm với điều đó không?

Hy vọng nó không nhiều, cảm ơn!

Answer 1

Trên máy sản xuất bạn có thể xây dựng các kịch bản của bạn với lệnh

NODE_ENV=production webpack 

Mặt khác qua biến này để /etc/environment cũng là giải pháp.

---

process.env.NODE_ENV được chuyển thành chuỗi tĩnh trong bundle.js

ví dụ nếu bạn chạy NODE_ENV=production webpack trên đoạn này

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

trong bundle.js bạn sẽ tìm thấy (edited)

if ('production' == 'development') { 
    console.log('this is visible in development'); 
} 

if (false) { // 'production' == 'development' 
    console.log('this is visible in development'); 
} 

---

Vì vậy, theo câu hỏi về cho phép/vô hiệu hóa tính năng mã của bạn là hợp lệ.

---

Nếu bạn muốn loại bỏ cơ thể của tình trạng nếu nó là sai (như trong ví dụ trên bạn không muốn hiển thị console.log('this is visible in development'); trong production môi trường), bạn nên sử dụng

new webpack.optimize.UglifyJsPlugin() 

Nó sẽ loại bỏ tất cả các câu lệnh if của bạn có điều kiện là false.