成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

淺析webpack源碼之convert-argv模塊（二）

lemon / 2507人閱讀

摘要：接下來我看看一下函數(shù)我們先按照分支走為讀取是里的對象，饒了這大的一個圈子，那么接下來一起來看一看對你的輸入配置做了怎么樣的處理吧

打開webpeck-cli下的convert-argv.js文件

// 定義options為空數(shù)組
 const options = [];
 // webpack -d 檢查 -d指令
  if (argv.d) { 
      //...
  }
  // webpack -p
  if (argv.p) {
      //...
  }
  if (argv.output) {
      //...
  }
   //...
   /*如果有 --config   --config webpack.config.js   config就是webpack.config.js
    可以這樣理解 
    "dev": "webpack-dev-server --inline --progress --hot --config webpack.config.js",當(dāng)我們npm run dev的時候執(zhí)行這段
    package.json的內(nèi)容 此時有config讀取webpack.config.js的內(nèi)容 當(dāng)我們npm run build時 執(zhí)行 "webpack" 此時沒有config走else分支*/
    if (argv.config) {
        // ... 獲取文件
    }else{
        /*讀取默認(rèn)配置 ts co 等后綴類
         defaultConfigFiles是 數(shù)組[{ path:
         "/Users/orion/Desktop/react-beauty-highcharts/webpack.config.js",
         ext: ".js"
         },{path:"/Users/orion/Desktop/react-beauty-highcharts/webpack.config.ts", ext: ".ts"},{},...] */
        for (i = 0; i < defaultConfigFiles.length; i++) {
            const webpackConfig = defaultConfigFiles[i].path;
            // 讀取文件,如果有的話push推進(jìn)去
            if (fs.existsSync(webpackConfig)) {
                configFiles.push({
                    path: webpackConfig,
                    ext: defaultConfigFiles[i].ext
                });
                //     最終結(jié)果configFiles is the Array [ { path:"/Users/orion/Desktop/react-beauty-highcharts/webpack.config.js",
                //  ext: ".js" } ]
                break;
            }
        
        }
    }

process.cwd() 是node.js里讀取文件路徑的一個API

//configFiles長度大于0時
if (configFiles.length > 0) {
    // ...
    const requireConfig = function requireConfig(configPath) {
        // 這是局部options不要和全局的options數(shù)組混淆
        let options = (function WEBPACK_OPTIONS() {
            if (argv.configRegister && argv.configRegister.length) {
                module.paths.unshift(
                    path.resolve(process.cwd(), "node_modules"),
                    process.cwd()
                );
                argv.configRegister.forEach(dep => {
                    require(dep);
                });
                return require(configPath);
            } else {
                // 讀取路徑下的文件內(nèi)容返回
                return require(configPath);
            }
        })();
        // 預(yù)處理options，options若是數(shù)組的話，處理成對象之類的
        options = prepareOptions(options, argv);
        return options;
    };
    configFiles.forEach(function(file) {
            /// interpret.extensions[.js]為null
            // 這里直接跳出
            registerCompiler(interpret.extensions[file.ext]);
            // options這里是全局options空數(shù)組 
            options.push(requireConfig(file.path));
        });
        // configFileLoaded 加載完畢
        configFileLoaded = true;
     }
     // 如果沒有加載完畢，調(diào)用函數(shù)傳遞空數(shù)組
    if (!configFileLoaded) {
        return processConfiguredOptions({});
    } else if (options.length === 1) {
       // 如果只有一個，把僅有的傳進(jìn)去 
        return processConfiguredOptions(options[0]);
    } else {
        // 傳options
        return processConfiguredOptions(options);
    }

注意了，這里有一個return 也就是這個convert-argv模塊的最終返回結(jié)果，函數(shù)到這里就結(jié)束了。接下來我看看一下processConfiguredOptions函數(shù)

我們先按照npm run build分支走options.length為1,讀取options[0]是webpack.config.js里的module.exports ={} 對象，饒了這大的一個圈子，那么接下來一起來看一看對你的輸入配置做了怎么樣的處理吧

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100912.html

相關(guān)文章

  • 淺析webpack源碼之前言（一）

    為什么讀webpack源碼 因?yàn)榍岸丝蚣茈x不開webpack，天天都在用的東西啊，怎能不研究 讀源碼能學(xué)到很多做項(xiàng)目看書學(xué)不到的東西，比如說架構(gòu)，構(gòu)造函數(shù)，es6很邊緣的用法，甚至給函數(shù)命名也會潛移默化的影響等 想寫源碼，不看源碼怎么行，雖然現(xiàn)在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧 知道世界的廣闊，那么多插件，那么多軟件開發(fā)師，他們在做什么，同樣是寫js的，怎么他們能這么偉大 好奇...

    suosuopuo 評論0 收藏0

  • webpack源碼之運(yùn)行流程

    摘要：引言通過前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個階段下面開始分析初始化這個階段整體流程做了什么啟動構(gòu)建，讀取與合并配置參數(shù)，加載，實(shí)例化。推薦源碼之源碼之機(jī)制源碼之簡介源碼之機(jī)制參考源碼 引言 通過前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個階段,下面開始分析 初始化 這個階段整體流程做了什么? 啟動構(gòu)建，讀...

    kviccn 評論0 收藏0

  • 淺析webpack源碼之processOptions處理Options以及入口函數(shù)（三）

    摘要：我們打開根據(jù)上次所返回的這個因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了大體邏輯是這樣的先定義一個空對象同上次的一個邏輯，還是一個目前的方式只有一個滿足如果滿足的會執(zhí)行一系列函數(shù)這個函數(shù)直接結(jié)果是的影響是打比如如果滿足的話當(dāng)你的時候就會在頁面上出 我們打開bin/cli.js根據(jù)上次所返回的Options processOptions(options)這個因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了,大體邏輯...

    doodlewind 評論0 收藏0

  • 淺析webpack源碼之WebpackOptionsApply 模塊(七)

    摘要：還做了處理，是之所以能根據(jù)變化自己更新的核心，好凌亂，我們先從那個坑跳出來進(jìn)入這個大坑進(jìn)入這個頁面看到前面一大堆的模塊引入，已經(jīng)給跪了，但是馬馬虎虎的完成也比放棄好前面一大堆的引入，主要是下和文件夾下的模塊父類就只是定義了接口主要核心在方法 NodeEnvironmentPlugin還做了watch處理，NodeWatchFileSystem是webpack之所以能根據(jù)變化自己更新的核...

    AaronYuan 評論0 收藏0

  • 淺析webpack源碼之NodeEnvironmentPlugin模塊總覽（六）

    摘要：進(jìn)入傳入地址出來一個復(fù)雜對象把掛載到對象上太復(fù)雜我們先看可以緩存輸入的文件系統(tǒng)輸入文件系統(tǒng)輸出文件系統(tǒng)，掛載到對象傳入輸入文件，監(jiān)視文件系統(tǒng)，掛載到對象添加事件流打開插件讀取目錄下文件對文件名進(jìn)行格式化異步讀取目錄下文件同步方法就 進(jìn)入webpack.js //傳入地址,new Compiler出來一個復(fù)雜對象 compiler = new Compiler(options.conte...

    ChristmasBoy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<