vue-cli3發(fā)布自2018年8月，距離現(xiàn)在還不是特別久，最好搭建項(xiàng)目剛好用到，所以寫(xiě)下這篇文章，記錄一下踩坑經(jīng)歷。

 
    


        


            


                


                

            

            


                

                    module.exports = {
                

            

        

        


            


                


                

            

            


                

                    configureWebpack: {
                

            

        

        


            


                


                

            

            


                

                    plugins: [
                

            

        

        


            


                


                

            

            


                

                    new MyAwesomeWebpackPlugin()
                

            

        

        


            


                


                

            

            


                

                    ]
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }復(fù)制代碼 
                

            

        

    

這份配置，最終會(huì)被合并到原來(lái)的配置里，不會(huì)覆蓋。

復(fù)雜的方法，可以往這個(gè)字段傳一個(gè)函數(shù)，如下所示：

 


    


        


            


            

        

        


            

                module.exports = {
            

        

    

    


        


            


            

        

        


            

                configureWebpack: config => {
            

        

    

    


        


            


            

        

        


            

                if (process.env.NODE_ENV === 'production') {
            

        

    

    


        


            


            

        

        


            

                // 為生產(chǎn)環(huán)境修改配置...
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                // 為開(kāi)發(fā)環(huán)境修改配置...
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

這樣就可以在一個(gè)函數(shù)里做一些簡(jiǎn)單的邏輯，config是webpack config，你可以直接修改config對(duì)象，也可以返回一個(gè)對(duì)象，這個(gè)對(duì)象最終也會(huì)被合并會(huì)webpack對(duì)象。

第三種方式，是通過(guò)webpack-chain來(lái)鏈?zhǔn)秸{(diào)用，代碼如下所示：

 


    


        


            


            

        

        


            

                module.exports = {
            

        

    

    


        


            


            

        

        


            

                chainWebpack: config => {
            

        

    

    


        


            


            

        

        


            

                config.module
            

        

    

    


        


            


            

        

        


            

                .rule('vue')
            

        

    

    


        


            


            

        

        


            

                .use('vue-loader')
            

        

    

    


        


            


            

        

        


            

                .loader('vue-loader')
            

        

    

    


        


            


            

        

        


            

                .tap(options => {
            

        

    

    


        


            


            

        

        


            

                // 修改它的選項(xiàng)...
            

        

    

    


        


            


            

        

        


            

                return options
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

3.提供圖形化管理界面，最所周知，gui易懂，cli，vue在降低學(xué)習(xí)門(mén)檻這方面，已經(jīng)是非常好了。

通過(guò)vue ui指令，可以查看編譯各個(gè)模塊的情況，模塊依賴情況，插件的情況，非常便于管理。

4.便捷性。vue-cli-server不僅支持項(xiàng)目的編譯，也支持單文件的編譯，具體的方法可以看官網(wǎng)介紹。

5.提供了cli的核心能力，也就是問(wèn)詢，模版渲染，文件生成這幾大核心功能。具體的示意圖可以看如下：

以上是cli2的核心模塊，需要引用hbs,inquirer.js,metalsmit等基本模塊，cli3的插件機(jī)制基本幫我們封裝好了，我們只需要根據(jù)插件的規(guī)范，就可以獲取這種能力。

由于有的讀者可能對(duì)cli2的流程比較陌生，所以我想簡(jiǎn)單描述一下cli2的工作流程，如下圖所示：

首先，cli2提供init指令，執(zhí)行這個(gè)指令，會(huì)去遠(yuǎn)程拿模版文件，并拉到本地用戶目錄的.vue-template的文件夾，然后通過(guò)meta里問(wèn)題，去問(wèn)你，然后生成最終模版到你執(zhí)行命令的目錄。

說(shuō)完vue-cli2，我們來(lái)看看vue-cli3的插件是怎么樣的？

首先根據(jù)插件的位置，我們分成了cli插件，和service插件。cli的插件有完整的開(kāi)發(fā)目錄，所能做的事情也比較多一點(diǎn)，service插件是一份js文件，導(dǎo)出一個(gè)函數(shù)。

cli插件的目錄如下所示：

具體的用發(fā)可以在官網(wǎng)了解到：

https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#cli-%E6%8F%92%E4%BB%B6

那么他們是怎么工作的呢？

cli的代碼主要在@vue/cli 下面，他的大概的流程如下圖所示：

@vue/cli/bin/vue.js:

 


    


        


            


            

        

        


            

                program
            

        

    

    


        


            


            

        

        


            

                .command('add <plugin> [pluginOptions]')
            

        

    

    


        


            


            

        

        


            

                .description('install a plugin and invoke its generator in an already created project')
            

        

    

    


        


            


            

        

        


            

                .option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
            

        

    

    


        


            


            

        

        


            

                .allowUnknownOption()
            

        

    

    


        


            


            

        

        


            

                .action((plugin) => {
            

        

    

    


        


            


            

        

        


            

                require('../lib/add')(plugin, minimist(process.argv.slice(3)))
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                program
            

        

    

    


        


            


            

        

        


            

                .command('invoke <plugin> [pluginOptions]')
            

        

    

    


        


            


            

        

        


            

                .description('invoke the generator of a plugin in an already created project')
            

        

    

    


        


            


            

        

        


            

                .option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
            

        

    

    


        


            


            

        

        


            

                .allowUnknownOption()
            

        

    

    


        


            


            

        

        


            

                .action((plugin) => {
            

        

    

    


        


            


            

        

        


            

                require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
            

        

    

    


        


            


            

        

        


            

                })復(fù)制代碼 
            

        

    

首先，執(zhí)行vue指令，會(huì)執(zhí)行@vue/cli/bin/vue.js，這里定義了vue add , vue invoke，vue build，vue serve，等指令，可以看出，add指令其實(shí)是包含invoke指令的，add指令主要是安裝一個(gè)包，并且觸發(fā)generator.js，invoke主要是觸發(fā)generator.js。

然后再來(lái)看@vue/cli/lib/add.js，

 


    


        


            


            

        

        


            

                const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
            

        

    

    


        


            


            

        

        


            

                await installPackage(context, packageManager, options.registry, packageName)復(fù)制代碼 
            

        

    

 


    


        


            


            

        

        


            

                const generatorPath = resolveModule(`${packageName}/generator`, context)
            

        

    

    


        


            


            

        

        


            

                if (generatorPath) {
            

        

    

    


        


            


            

        

        


            

                invoke(pluginName, options, context)
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                log(`Plugin ${packageName} does not have a generator to invoke`)
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

add.js主要安裝包，然后執(zhí)行invoke模塊，我們?cè)倏纯磇nvoke模塊做了什么。

@vue/cli/lib/invoke.js

 
    


        


            


                


                

            

            


                

                    const generator = new Generator(context, {
                

            

        

        


            


                


                

            

            


                

                    pkg,
                

            

        

        


            


                


                

            

            


                

                    plugins: [plugin],
                

            

        

        


            


                


                

            

            


                

                    files: await readFiles(context),
                

            

        

        


            


                


                

            

            


                

                    completeCbs: createCompleteCbs,
                

            

        

        


            


                


                

            

            


                

                    invoking: true 
                

            

        

        


            


                


                

            

            


                

                    })復(fù)制代碼 
                

            

        

    

invoke里主要實(shí)例化generator類(lèi)，然后把你的插件當(dāng)成參數(shù)傳給類(lèi)，generator類(lèi)算是vue-cli的核心類(lèi)了。

@vue/cli/lib/generator.js

 


    


        


            


            

        

        


            

                plugins.forEach(({ id, apply, options }) => {
            

        

    

    


        


            


            

        

        


            

                const api = new GeneratorAPI(id, this, options, rootOptions)
            

        

    

    


        


            


            

        

        


            

                apply(api, options, rootOptions, invoking)
            

        

    

    


        


            


            

        

        


            

                })復(fù)制代碼 
            

        

    

這個(gè)類(lèi)主要負(fù)責(zé)執(zhí)行你的插件，然后把generatorapi作為參數(shù)傳入插件的generator.js導(dǎo)出的函數(shù)。

具體的vue-cli插件的開(kāi)發(fā)是怎么樣的呢，我寫(xiě)了一個(gè)demo，用在模擬多項(xiàng)目的ci模版管理，通常每個(gè)項(xiàng)目都有一份.gitlab-ci.yml模版，所以我們一般可以抽出一個(gè)公共的ci模版來(lái)管理，這里我用cli插件來(lái)管理，真正的項(xiàng)目可能不具備可行性，這里我只是用來(lái)寫(xiě)一個(gè)例子。

目錄結(jié)構(gòu)大概如上所示，執(zhí)行vue add foo后，就會(huì)出現(xiàn)propmts對(duì)話框，然后選擇答案后，就會(huì)根據(jù)配置生成模版到你的根目錄下。

_gitlab-ci.yml ,根據(jù)問(wèn)題選擇是否用私有npm倉(cāng)庫(kù)：

 


    


        


            


            

        

        


            

                script:
            

        

    

    


        


            


            

        

        


            

                <%_ if (options.config === 'npm') { _%>
            

        

    

    


        


            


            

        

        


            

                - nrm add companynpm http://xxx.y.cn:XXXXX/
            

        

    

    


        


            


            

        

        


            

                - nrm use companynpm
            

        

    

    


        


            


            

        

        


            

                <%_ } _%>復(fù)制代碼 
            

        

    

prompts.js,主要一些問(wèn)題的設(shè)計(jì)：

 


    


        


            


            

        

        


            

                module.exports = [
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                name: 'config',
            

        

    

    


        


            


            

        

        


            

                type: 'list',
            

        

    

    


        


            


            

        

        


            

                message: `是否需要切換內(nèi)部源:`,
            

        

    

    


        


            


            

        

        


            

                choices: [
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                name: '需要',
            

        

    

    


        


            


            

        

        


            

                value: 'npm',
            

        

    

    


        


            


            

        

        


            

                short: '' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                name: '不需要',
            

        

    

    


        


            


            

        

        


            

                value: 'npm',
            

        

    

    


        


            


            

        

        


            

                short: '' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                ]復(fù)制代碼 
            

        

    

generator.js 這個(gè)模塊很簡(jiǎn)單，直接渲染模版

 


    


        


            


            

        

        


            

                module.exports = (api, options, rootOptions) => {
            

        

    

    


        


            


            

        

        


            

                // 復(fù)制并用 ejs 渲染 `./template` 內(nèi)所有的文件
            

        

    

    


        


            


            

        

        


            

                api.render('./template')
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

service插件主要放在項(xiàng)目本地，是一份js代碼，然后導(dǎo)出一個(gè)函數(shù)，通過(guò)package.json配置指向這個(gè)js文件的路徑，

service主要依賴的代碼在@vue/cli-service里，首先先執(zhí)行@vue/cli-service/bin/vue-cli-service.js文件，

 


    


        


            


            

        

        


            

                const Service = require('../lib/Service')
            

        

    

    


        


            


            

        

        


            

                const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                .....
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                service.run(command, args, rawArgv).catch(err => {
            

        

    

    


        


            


            

        

        


            

                error(err)
            

        

    

    


        


            


            

        

        


            

                process.exit(1)
            

        

    

    


        


            


            

        

        


            

                })復(fù)制代碼 
            

        

    

該文件實(shí)例化Service類(lèi)，這個(gè)類(lèi)是service插件的核心類(lèi)，然后再執(zhí)行run方法。

再來(lái)看看@vue/cli-service/lib/Service.js的代碼：

首先構(gòu)造函數(shù)執(zhí)行resolvePlugin，把官方提供的插件和項(xiàng)目里的插件都加載進(jìn)來(lái)，

 


    


        


            


            

        

        


            

                constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
            

        

    

    


        


            


            

        

        


            

                this.plugins = this.resolvePlugins(plugins, useBuiltIn)
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

resolvePlugin這個(gè)函數(shù)主要在這里引入本地的插件：

 


    


        


            


            

        

        


            

                resolvePlugins (inlinePlugins, useBuiltIn) {
            

        

    

    


        


            


            

        

        


            

                // Local plugins
            

        

    

    


        


            


            

        

        


            

                if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {
            

        

    

    


        


            


            

        

        


            

                const files = this.pkg.vuePlugins.service
            

        

    

    


        


            


            

        

        


            

                if (!Array.isArray(files)) {
            

        

    

    


        


            


            

        

        


            

                throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                plugins = plugins.concat(files.map(file => ({
            

        

    

    


        


            


            

        

        


            

                id: `local:${file}`,
            

        

    

    


        


            


            

        

        


            

                apply: loadModule(file, this.pkgContext)
            

        

    

    


        


            


            

        

        


            

                })))
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                return plugins
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

run方法又會(huì)執(zhí)行init方法，在該方法內(nèi)部執(zhí)行插件：

 


    


        


            


            

        

        


            

                init (mode = process.env.VUE_CLI_MODE) {
            

        

    

    


        


            


            

        

        


            

                // apply plugins.
            

        

    

    


        


            


            

        

        


            

                this.plugins.forEach(({ id, apply }) => {
            

        

    

    


        


            


            

        

        


            

                apply(new PluginAPI(id, this), this.projectOptions)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

那么service插件要如何來(lái)實(shí)踐，我們來(lái)看如下的例子：

首先在package.json配置一下，指向本地的插件my-service.js

 


    


        


            


            

        

        


            

                "vuePlugins": {
            

        

    

    


        


            


            

        

        


            

                "service": [
            

        

    

    


        


            


            

        

        


            

                "my-service.js" 
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼 
            

        

    

my-service.js的代碼如下所示：

 


    


        


            


            

        

        


            

                const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
            

        

    

    


        


            


            

        

        


            

                const webpack = require('webpack');
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                module.exports = (api, projectOptions) => {
            

        

    

    


        


            


            

        

        


            

                api.registerCommand(
            

        

    

    


        


            


            

        

        


            

                'analyze',
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                description: 'start analyze server',
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                (args) => {
            

        

    

    


        


            


            

        

        


            

                // 注冊(cè) `vue-cli-service analyze`
            

        

    

    


        


            


            

        

        


            

                let options = projectOptions.pluginOptions.demoOptions
            

        

    

    


        


            


            

        

        


            

                console.log(options);
            

        

    

    


        


            


            

        

        


            

                // resolve webpack config
            

        

    

    


        


            


            

        

        


            

                const webpackConfig = api.resolveWebpackConfig();
            

        

    

    


        


            


            

        

        


            

                webpackConfig.plugins.push(new BundleAnalyzerPlugin());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                webpack(webpackConfig,(err,stats)=>{
            

        

    

    


        


            


            

        

        


            

                if(!err) console.log('打包成功')
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            

                };復(fù)制代碼