寫(xiě)node 插件

編寫(xiě)插件

插件是社區(qū)構(gòu)建的規(guī)則和規(guī)則集

我們推薦使用您自己熟悉的，并且秉承stylelint的編寫(xiě)規(guī)則慣例，包括命名、選項(xiàng)、消息、測(cè)試和文檔。

插件詳解

// 小例子
var stylelint = require("stylelint")
var ruleName = "plugin/foo-bar"
var messages = stylelint.utils.ruleMessages(ruleName, {
 expected: "Expected ...",
})
module.exports = stylelint.createPlugin(ruleName, function(primaryOption, secondaryOptionObject) {
 return function(postcssRoot, postcssResult) {
 var validOptions = stylelint.utils.validateOptions(postcssResult, ruleName, { .. })
 if (!validOptions) { return }
 // ... some logic ...
 stylelint.utils.report({ .. })
 }
})
module.exports.ruleName = ruleName
module.exports.messages = messages
復(fù)制代碼

您的插件規(guī)則命名必須有命名空間，例如：your-namespace/your-rule-name。如果您的插件只提供一個(gè)簡(jiǎn)單的規(guī)則或者您不能想到一個(gè)很好命名空間，您可簡(jiǎn)單用`plugin/my-rule來(lái)命名。這個(gè)命名空間確保了，這個(gè)插件的規(guī)則不會(huì)與核心規(guī)則沖突。*請(qǐng)確保你的文檔里面，對(duì)用戶(hù)提供了你的插件的規(guī)則名字（和命名空間），因?yàn)樗麄冃枰谒麄兊呐渲胏onfig里面用到。

stylelint.createPlugin(ruleName, ruleFunction) 可以確保你的插件能與其他規(guī)則正確的工作。

為了使你的插件可以和 標(biāo)準(zhǔn)配置格式一起正常工作, ruleFunction 可以接受兩個(gè)參數(shù)：第一個(gè)是主要選項(xiàng)，第二個(gè)是可選對(duì)象。

如果您的插件規(guī)則支持自動(dòng)修復(fù), 那么ruleFunction也可以接受第三個(gè)參數(shù):上下文（context)。 并且，強(qiáng)烈建議在你的第二個(gè)參數(shù)配置對(duì)象里面支持 disableFix。 這樣，當(dāng)用戶(hù)對(duì)你的規(guī)則設(shè)置了disableFix選項(xiàng)時(shí)，就不會(huì)自動(dòng)修復(fù)了。

ruleFunction 可以返回一個(gè)函數(shù)，這個(gè)函數(shù)本質(zhì)上是一個(gè)小的PostCSS 插件：它接受兩個(gè)參數(shù)：一個(gè)是PostCSS Root (the parsed AST)，另外一個(gè)是PostCSS LazyResult。所以你可以去了解 PostCSS API.

異步規(guī)則

PostCSS插件的異步規(guī)則也可以實(shí)現(xiàn)。您只需要返回一個(gè)您插件函數(shù)的實(shí)例。

// 異步小例子
var stylelint = require("stylelint")
var ruleName = "plugin/foo-bar-async"
var messages = stylelint.utils.ruleMessages(ruleName, {
 expected: "Expected ...",
})
module.exports = stylelint.createPlugin(ruleName, function(primaryOption, secondaryOptionObject) {
 return function(postcssRoot, postcssResult) {
 var validOptions = stylelint.utils.validateOptions(postcssResult, ruleName, { .. })
 if (!validOptions) { return }
 return new Promise(function(resolve) {
 // 一些異步的設(shè)置
 setTimeout(function() {
 // ... 一些業(yè)務(wù)邏輯 ...
 stylelint.utils.report({ .. })
 resolve()
 }, 1)
 })
 }
})
module.exports.ruleName = ruleName
module.exports.messages = messages
復(fù)制代碼

stylelint.utils

stylelint對(duì)外暴露一個(gè)有用的工具函數(shù)，關(guān)于這些函數(shù)的詳細(xì)APIs,請(qǐng)參考源碼的注釋和一些標(biāo)準(zhǔn)規(guī)則的例子。

stylelint.utils.report

添加違例列表里面你插件的違例，這樣stylelint就就可以報(bào)給用戶(hù)。

不要直接使用PostCSS的node.warn() 方法. 當(dāng)你使用 stylelint.utils.report的時(shí)候，你的插件會(huì)遵守禁用范圍和其他未來(lái)stylelint的特性。這將會(huì)提供一個(gè)更好的用戶(hù)體驗(yàn)和更好的匹配stylelint的規(guī)則規(guī)范。

stylelint.utils.ruleMessages

自定義你消息的來(lái)滿(mǎn)足stylelint規(guī)則規(guī)范的格式

stylelint.utils.validateOptions

驗(yàn)證您的規(guī)則選項(xiàng)

stylelint.utils.checkAgainstRule

用你自己的規(guī)則校驗(yàn)CSS，依照標(biāo)準(zhǔn)的stylelint規(guī)范。這個(gè)函數(shù)對(duì)插件和希望改進(jìn)、約束與擴(kuò)展已有stylelint規(guī)則功能開(kāi)發(fā)者，是有效的、靈活的。

接受一個(gè)對(duì)象選項(xiàng)，并且返回一個(gè)返回值，這個(gè)返回值調(diào)用指定規(guī)則的警告。這些選項(xiàng)是：

• ruleName: 調(diào)用規(guī)則的名字。.
• ruleSettings: 設(shè)置調(diào)用規(guī)則的配置， 在.stylelintrc 里的配置對(duì)象中，同一格式化.
• root: 根運(yùn)行這個(gè)規(guī)則的根node環(huán)境.

使用從來(lái)自stylelint.utils.report的報(bào)出的你的插件規(guī)則中的警告，來(lái)創(chuàng)建一個(gè)新警告

比如，假設(shè)你想要?jiǎng)?chuàng)建一個(gè)插件，使用一個(gè)忽略你的選擇預(yù)處理器配置的規(guī)則的內(nèi)置列表，來(lái)運(yùn)行at-rule-no-unknown。

const allowableAtRules = [..]
function myPluginRule(primaryOption, secondaryOptions) {
 return (root, result) => {
 const defaultedOptions = Object.assign({}, secondaryOptions, {
 ignoreAtRules: allowableAtRules.concat(options.ignoreAtRules || []),
 })
 stylelint.utils.checkAgainstRule({
 ruleName: 'at-rule-no-unknown',
 ruleSettings: [primaryOption, defaultedOptions],
 root: root
 }, (warning) => {
 stylelint.utils.report({
 message: myMessage,
 ruleName: myRuleName,
 result: result,
 node: warning.node,
 line: warning.line,
 column: warning.column,
 })
 })
 }
}
復(fù)制代碼

stylelint.rules

所有的規(guī)則函數(shù)都支持stylelint.rules。這樣你可以在現(xiàn)有的規(guī)則上針對(duì)實(shí)際需求來(lái)構(gòu)建。

一個(gè)典型的常規(guī)使用方式是，在更復(fù)雜的規(guī)則選項(xiàng)允許條件下編譯。例如，也許你的代碼庫(kù)想使用特定的注釋指令，來(lái)對(duì)特殊的樣式表自定義規(guī)則選項(xiàng)。你可以構(gòu)建一個(gè)插件來(lái)檢查這些指令，然后運(yùn)行用正確的選項(xiàng)（或者不是全部運(yùn)行它們）適當(dāng)?shù)囊?guī)則。

所有的規(guī)則使用一個(gè)公共的簽名。他們是一個(gè)接受兩個(gè)參數(shù)的函數(shù)：一個(gè)主選項(xiàng)和一個(gè)次選項(xiàng)對(duì)象。并且這個(gè)函數(shù)返回一個(gè)帶有PostCSS插件簽名的函數(shù)。

這里有個(gè)小插件的小例子，只有當(dāng)樣式表某個(gè)地方有特定的@@check-color-hex-case值時(shí)運(yùn)行color-hex-case。

export default stylelint.createPlugin(ruleName, function (expectation) {
 const runColorHexCase = stylelint.rules["color-hex-case"](expectation)
 return (root, result) => {
 if (root.toString().indexOf("@@check-color-hex-case") === -1) return
 runColorHexCase(root, result)
 }
})
復(fù)制代碼

允許主選項(xiàng)數(shù)組

如果你的插件可以接受一個(gè)數(shù)組作為他的主選項(xiàng)，你可以在你的規(guī)則函數(shù)上指定設(shè)置primaryOptionArray = true的值。更多信息請(qǐng)參考"使用規(guī)則"文檔

外部幫助模塊

除了在"使用規(guī)則" 文檔中提到的標(biāo)準(zhǔn)解析器, 我們還推薦使用，在stylelint里面用到的其他的外部模塊. 它們包括:

• normalize-selector: 標(biāo)準(zhǔn)化 CSS 選擇器.
• postcss-resolve-nested-selector: 在PostCSS虛擬語(yǔ)法樹(shù)（AST）中提供一個(gè)（嵌套）選擇器，返回一個(gè)解析后的選擇器的數(shù)組。
• style-search: Search CSS (and CSS-like) strings, with sensitivity to whether matches occur inside strings, comments, and functions.
• style-search: 查詢(xún) CSS (和類(lèi)CSS) 字符串, 敏感匹配出現(xiàn)在字符串、注釋和函數(shù)的字符串。

請(qǐng)了解一下stylelint的內(nèi)部工具函數(shù) ，如果你遇到一個(gè)你的插件需要的函數(shù)，請(qǐng)考慮幫助我們把它擴(kuò)展成為一個(gè)外部模塊。

同版本依賴(lài)

你可以，在你插件的package.json文件里面的 peerDependencies鍵值（注意不是在dependencies鍵值里面配置，你的插件可以使用的stylelint的版本號(hào)。這個(gè)保證了不同版本的stylelint不會(huì)被意外安裝的風(fēng)險(xiǎn)。

例如，下面表示你的插件可以正常使用，依賴(lài)stylelint版本7或者版本8。

{
 "peerDependencies": {
 "stylelint": "^7.0.0 || ^8.0.0"
 }
}
復(fù)制代碼

測(cè)試插件

為了測(cè)試你的插件，你可以考慮使用和stylelint內(nèi)部使用的一樣的規(guī)則測(cè)試函數(shù)，: stylelint-test-rule-tape。

插件包

使用一個(gè)簡(jiǎn)單的模塊來(lái)提供多項(xiàng)規(guī)則，簡(jiǎn)單暴露一個(gè)插件對(duì)象集合的數(shù)組（而不是一個(gè)對(duì)象）。

共享插件和插件包

• 在你的package.json文件里面，請(qǐng)使用stylelint-plugin關(guān)鍵字。
• 一旦你的插件被發(fā)布了，請(qǐng)給我們提交一個(gè)Pull Request，來(lái)添加你的插件到插件列表。

all-admin-web

前言

該項(xiàng)目為前后端分離項(xiàng)目的前端部分，后端項(xiàng)目mall地址：傳送門(mén)。

項(xiàng)目介紹

mall-admin-web是一個(gè)電商后臺(tái)管理系統(tǒng)的前端項(xiàng)目，基于Vue+Element實(shí)現(xiàn)。 主要包括商品管理、訂單管理、會(huì)員管理、促銷(xiāo)管理、運(yùn)營(yíng)管理、內(nèi)容管理、統(tǒng)計(jì)報(bào)表、財(cái)務(wù)管理、權(quán)限管理、設(shè)置等功能。

項(xiàng)目演示

項(xiàng)目在線演示地址：http://39.98.190.128/index.html

項(xiàng)目布局

src -- 源碼目錄
├── api -- axios網(wǎng)絡(luò)請(qǐng)求定義
├── assets -- 靜態(tài)圖片資源文件
├── components -- 通用組件封裝
├── icons -- svg矢量圖片文件
├── router -- vue-router路由配置
├── store -- vuex的狀態(tài)管理
├── styles -- 全局css樣式
├── utils -- 工具類(lèi)
└── views -- 前端頁(yè)面
 ├── home -- 首頁(yè)
 ├── layout -- 通用頁(yè)面加載框架
 ├── login -- 登錄頁(yè)
 ├── oms -- 訂單模塊頁(yè)面
 ├── pms -- 商品模塊頁(yè)面
 └── sms -- 營(yíng)銷(xiāo)模塊頁(yè)面

搭建步驟

• 下載node并安裝：https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi;
• 該項(xiàng)目為前后端分離項(xiàng)目，訪問(wèn)本地訪問(wèn)接口需搭建后臺(tái)環(huán)境，搭建請(qǐng)參考后端項(xiàng)目傳送門(mén);
• 訪問(wèn)在線接口無(wú)需搭建后臺(tái)環(huán)境，只需將config/dev.env.js文件中的BASE_API改為http://39.98.190.128:8080即可;
• 克隆源代碼到本地，使用IDEA打開(kāi)，并完成編譯;
• 在IDEA命令行中運(yùn)行命令：npm install,下載相關(guān)依賴(lài);
• 在IDEA命令行中運(yùn)行命令：npm run dev,運(yùn)行項(xiàng)目;
• 訪問(wèn)地址：http://localhost:8090 即可打開(kāi)后臺(tái)管理系統(tǒng)頁(yè)面;
• 如果遇到無(wú)法運(yùn)行該命令，需要配置npm的環(huán)境變量，如在path變量中添加：C:\Users\zhenghong\AppData\Roaming\npm。

https://github.com/macrozheng/mall-admin-web