[[423279]]

繼承和重寫是面向?qū)ο缶幊陶Z(yǔ)言中的概念，是指一個(gè)類擴(kuò)展自父類，并且重新實(shí)現(xiàn)了其中一些屬性、方法。這種思想不只是在編程語(yǔ)言中會(huì)用到，在配置文件中也有廣泛的應(yīng)用。

本文我們分別從 babel 和 eslint 的配置文件來(lái)重新審視一下繼承和重寫。

Javascript 中的繼承和重寫

我們定義一個(gè) Person 類，它有 eat、sleep、getSkills 3 個(gè)方法。

class Person { 
    eat(){} 
    sleep() {} 
    getSkills() {} 
} 

然后定義一個(gè) Guang 類，繼承自 Person，重寫 getSkills 方法。

class Guang extends Person { 
    getSkills() { 
        return ['babel', 'eslint', 'vscode', 'node.js'] 
    } 
} 

創(chuàng)建 Guang 的實(shí)例對(duì)象，這個(gè)對(duì)象就有 eat、sleep 方法，并且有重寫后的 getSkills 方法了。

這是一種重要的語(yǔ)言特性，Javascript 中是通過(guò)原型鏈實(shí)現(xiàn)的。

babel 配置中的繼承和重寫

babel 是微內(nèi)核架構(gòu)，所有的代碼轉(zhuǎn)換都是通過(guò)插件來(lái)完成的。es2015 需要指定一堆插件、es2016 也要指定一堆插件，為了簡(jiǎn)化這些插件的配置，eslint 支持把一系列插件封裝成一個(gè) preset，在配置文件中指定 preset 的方式來(lái)引入具體的插件。

于是 babel6 就有了 preset-es2015、preset-es2016 等 preset，后來(lái) babel7 還支持了指定目標(biāo)環(huán)境來(lái)動(dòng)態(tài)指定一系列插件的 preset-env。

preset 就是把一些插件封裝到一起。比如：

module.exports = function() { 
    return {  
        plugins: ["pluginA", "pluginB", "pluginC"] 
    };  
}; 

而且 preset 里也可以繼承 preset：

module.exports = function() { 
    return {  
        preset: ['presetA'] 
        plugins: ["pluginA", "pluginB", "pluginC"] 
    };  
}; 

這就像 Javascript 里面 C 繼承了 B，B 繼承了 A 一樣，而且配置里還是多繼承的。

babel 插件生效的順序是先 plugin 后 preset，plugin 從左到右，preset 從右到左，這樣的生效順序使得配置里的插件是可以覆蓋 preset 里面插件的配置的，也就是重寫。

除了整體的插件的 override 以外，babel 還支持了文件級(jí)別、環(huán)境級(jí)別的 override：

文件級(jí)別的重寫：

在配置中可以設(shè)置對(duì)什么文件重寫什么配置：

overrides: [ 
    {  
        test: "./xxx.js",  
        plugins: ['pluginX'] 
    } 
] 

當(dāng)編譯這個(gè)文件的時(shí)候，就會(huì)把這些 option 合并到主 option 中。

比如 ts 和 js 需要的 plugin、preset 和其他配置都不一樣，通過(guò) override 就可以分別指定。

環(huán)境級(jí)別的重寫：

當(dāng)文件級(jí)別的配置重寫還不夠，有時(shí)候開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境也要使用不同的插件等，所以 babel 還支持了環(huán)境級(jí)別的重寫：

envName: 'development', 
env: { 
    development: { 
        plugins: ['pluginA'] 
    }, 
    production: { 
        plugins: ['pluginB'] 
    } 
} 

通過(guò) envName 來(lái)啟用不同的不同環(huán)境的配置，合并到主配置中。

這個(gè) envName 其實(shí)不需要設(shè)置，默認(rèn)是 process.env.BABEL_ENV 或者 process.env.NODE_ENV 的值。

可以看到，babel 支持了把插件封裝成 preset，preset 和 preset 之間還可以繼承，因?yàn)?生效順序是先 plugin 后 preset，所以可以達(dá)到重寫的目的。而且還可以文件級(jí)別和環(huán)境級(jí)別的重寫，分別通過(guò) overrides 和 env 的配置。

eslint 配置中的繼承和重寫

eslint 的配置同樣支持封裝，不過(guò)不叫 preset，而叫 sharable config。因?yàn)?babel 的 preset 更多是為了簡(jiǎn)化配置的，而 eslint 的 config 的目的不是簡(jiǎn)化配置，而是共享配置，所以叫做 sharable config。

eslint 中可以使用 extends 來(lái)繼承一個(gè) config：

{ 
    "plugins": [ 
        "react" 
    ], 
    "extends": [ 
        "eslint:recommended", 
        "plugin:react/recommended" 
        "./aaa/.eslintrc-jsx" 
    ], 
    "rules": { 
       "no-set-state": "off" 
    } 
} 

sharable config 的路徑可以通過(guò) eslint: 來(lái)指定內(nèi)置的 config，通過(guò) plugin: 來(lái)指定插件里的 config，通過(guò)相對(duì)路徑來(lái)指定任意位置的 config。

具體的 config 就包含了各種共享的配置，而且也支持繼承自某個(gè)配置。

module.exports = { 
    rules: { 
        'no-alert': 2 
    }, 
    extends: 'myconfig/lib/defaults' 
}; 

這里要注意下配置的 rule 的合并規(guī)則：

如果只重寫了錯(cuò)誤級(jí)別，那么 option 會(huì)繼承。

rule: { 
    ruleA: ['error'], //只重寫錯(cuò)誤級(jí)別，option 會(huì)繼承 
    ruleB: ['warn', 'aaa']//錯(cuò)誤級(jí)別和 option 都重寫 
} 

除了整體配置的重寫之外，也同樣支持文件級(jí)別的重寫：

"overrides": [ 
    { 
        "files": ["**/*.md/*.js"], 
        "rules": { 
            "strict": "off" 
        } 
    } 
] 

這樣就可以在 lint 不同文件的時(shí)候使用不同的 rule，比如 ts 和 js 就需要用不同的 rule。

eslint 里有環(huán)境級(jí)別的重寫么?

沒(méi)有。babel 有環(huán)境級(jí)別的配置重寫是因?yàn)槭切枰纱a的，不同環(huán)境生成的代碼可能要有些區(qū)別。而 eslint 并不需要生成代碼，只是對(duì)源碼的 lint，所以不需要環(huán)境級(jí)別的配置重寫。

eslint 也有 env 配置，但是和 babel 的 env 不同：

"env": { 
    "es6": true 
} 

eslint 的 env 配置是指定運(yùn)行環(huán)境的，babel 的 env 配置是指定不同環(huán)境要重寫的配置的，兩者是不同的作用。

可以看到，eslint 支持了把配置封裝成 sharable config，config 和 config 之間還可以通過(guò) extends 繼承，而且還支持通過(guò) overrides 指定文件級(jí)別的重寫，但是不需要支持環(huán)境級(jí)別的重寫。

總結(jié)

繼承和重寫是一種常見(jiàn)的思想，不只是在編程語(yǔ)言的語(yǔ)法中，在配置文件中也有很多應(yīng)用。

babel 和 eslint 都支持把一部分配置進(jìn)行封裝，達(dá)到復(fù)用和簡(jiǎn)化配置的目的，但是 babel 中叫 preset，eslint 中叫 sharable config，因?yàn)橐粋€(gè)主要是為了簡(jiǎn)化配置，一個(gè)主要是為了共享。

除了整體配置的重寫之外，babel 還支持文件級(jí)別的重寫(overrides)和環(huán)境級(jí)別的重寫(env)，eslint 中支持文件級(jí)別的重寫(overrides)。

繼承和重寫是一種思想，不只是體現(xiàn)在編程語(yǔ)言的語(yǔ)法中，在配置文件領(lǐng)域也有很多應(yīng)用。