作者：水濤
座右銘：天行健，君子以自強不息
自白：我寫博文上來蹭蹭就是干，我突然覺得我需要幽默一點了，好了，下面我們說正經的
一、官方定義：
DefinePlugin
DefinePlugin 允許創建一個在編譯時可以配置的全域常量，這可能會對開發模式和生產模式的構建允許不同的行為非常有用，如果在開發構建中，而不在發布構建中執行日志記錄，則可以使用全域常量來決定是否記錄日志，這就是 DefinePlugin 的用處，設定它，就可以忘記開發環境和生產環境構建的規則，
new webpack.DefinePlugin({
// Definitions...
});
用法
每個傳進 DefinePlugin 的鍵值都是一個標志符或者多個用 . 連接起來的標志符，
- 如果這個值是一個字串，它會被當作一個代碼片段來使用，
- 如果這個值不是字串，它會被轉化為字串(包括函式)，
- 如果這個值是一個物件，它所有的 key 會被同樣的方式定義，
- 如果在一個 key 前面加了
typeof,它會被定義為 typeof 呼叫，
這些值會被行內進那些允許傳一個代碼壓縮引數的代碼中，從而減少冗余的條件判斷，
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_HTML5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object'),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});
console.log('Running App version ' + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');
When defining values for
processprefer'process.env.NODE_ENV': JSON.stringify('production')overprocess: { env: { NODE_ENV: JSON.stringify('production') } }. Using the latter will overwrite theprocessobject which can break compatibility with some modules that expect other values on the process object to be defined.
注意，因為這個插件直接執行文本替換，給定的值必須包含字串本身內的實際引號，通常，有兩種方式來達到這個效果，使用
'"production"', 或者使用JSON.stringify('production')，
二、個人分析
1、官網中說的“可以使用這個插件定義一些編譯時的全域常量”
編譯時這幾個字很重要，webpack會根據組態檔將將入口檔案決議、打包、轉譯為瀏覽器可識別的js檔案最后輸出到出口，而他轉譯的程序其實就是webpack編譯程序，也就是官網說的編譯時，
2、官網中說的“插件會直接替換文本”
> 在編譯程序中（轉譯為瀏覽器可識別的js檔案時），會將源檔案中所有用到DefinePlugin中定義的常量的地方直接替換為對應的值文本，注意，是文本無論語意上是物件還是字串還是函式，都直接作為文本替換過去，
示例1：
假設在組態檔中定義編譯時全域常量 process.env.firstName
new webpack.DefinePlugin({
'process.env.firstName': JSON.stringify("ShuiTao")
});
源檔案index.js內容如下
console.log(process.env.firstName)
最終轉譯后的js檔案
console.log('ShuiTao')
可以看到，在編譯生成新js檔案時，將process.env.firstName常量直接替換成了他對應的值文
示例2：
假設在組態檔中定義編譯時全域常量 process.env.info
new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
name:'ShuiTao',
age:23
}) });
源檔案index.js內容如下
console.log(process.env.info)
最終轉譯后的js檔案
console.log({
name:'ShuiTao',
age:23
})
可以看到，在編譯生成新js檔案時，將process.env.info常量直接替換成了他對應的值文本
示例3：
假設在組態檔中定義編譯時全域常量 process.env.info
new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
name:'ShuiTao',
age:23
}) });
源檔案index.js內容如下
console.log(process.env);
console.log(process.env.info);
最終轉譯后的js檔案
console.log(process.env);
console.log({
name:'ShuiTao',
age:23
});
可以看到，在編譯生成新js檔案時，將process.env.info常量直接替換成了他對應的值文本,而process.env沒有被替換，因為沒有在DefinePlugin中定義process.env
運行最終轉譯后的js檔案時，process.env指向的是Node中的process，在process.env中找不到info屬性，足以證明在DefinePlugin定義的process.env.info和Node的process沒有任何關系，他只是一個在插件中定義的編譯時的常量，編譯后就已經被替換了，因此 理解清楚概念，他只是個編譯時的常量，轉譯后就會被替換，只是恰好常量的名字是process.env.info
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/167481.html
標籤：JavaScript