提交 4c861885 编写于 作者: U ULIVZ

wip commit

上级 4a578d16
...@@ -10,10 +10,10 @@ Plugins usually add global-level functionality to VuePress. There is no strictly ...@@ -10,10 +10,10 @@ Plugins usually add global-level functionality to VuePress. There is no strictly
1. Extend the data generated at compile time. e.g. `the last updated time of each file`. 1. Extend the data generated at compile time. e.g. `the last updated time of each file`.
2. Generate extra files before or after compilation. e.g. `PWA support`. 2. Generate extra files before or after compilation. e.g. `PWA support`.
3. Add some extra pages. 3. Add extra pages. e.g. [vuepress-plugin-i18n-ui](https://github.com/ulivz/vuepress-plugin-i18n-ui)
4. Add some global UI. e.g. `back to top`. 4. Inject global UI. e.g. `back to top`.
A plugin should export a `plain object`(`#1`). If the plugin needs to take options, it can be a function that exports a plain object(`#2`). The function will be called with the plugin's options as the first argument, along with plugin's context which provides some compile-time context. A plugin should export a `plain object`(`#1`). If the plugin needs to take options, it can be a function that exports a plain object(`#2`). The function will be called with the plugin's options as the first argument, along with [plugin context](#plugin-context) which provides some compile-time context.
``` js ``` js
// #1 // #1
...@@ -79,6 +79,21 @@ module.exports = { ...@@ -79,6 +79,21 @@ module.exports = {
The name of the plugin. The name of the plugin.
### enable
- Type: `boolean`
- Default: true
Configure whether to enable this plugin. e.g. if you want to enable a plugin only in development mode:
``` js
module.exports = (options, context) => {
return {
enable: !context.isProd
}
}
```
### chainWebpack ### chainWebpack
- Type: `Function` - Type: `Function`
...@@ -252,18 +267,18 @@ module.exports = { ...@@ -252,18 +267,18 @@ module.exports = {
} }
```` ````
## Plugin Context
```
module.exports = (options, context) => {
return {
enable: !context.isProd
}
}
```
## Lifecycle
在正式介绍插件之前,我们需要花一些时间来了解 VuePress 的基本工作原理。
## Lifecycle Diagram
首先,我们都知道 VuePress 有两个主要指令: 首先,我们都知道 VuePress 有两个主要指令:
...@@ -278,3 +293,13 @@ dev 和 build 的工作过程大抵相同,他们的基本工作流程如下: ...@@ -278,3 +293,13 @@ dev 和 build 的工作过程大抵相同,他们的基本工作流程如下:
在正式介绍插件之前,我们需要花一些时间来了解 VuePress 的基本工作原理。
...@@ -16,7 +16,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) { ...@@ -16,7 +16,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
const { normalizeHeadTag, applyUserWebpackConfig } = require('./util') const { normalizeHeadTag, applyUserWebpackConfig } = require('./util')
logger.wait('\nExtracting site metadata...') logger.wait('\nExtracting site metadata...')
const options = await prepare(sourceDir) const options = await prepare(sourceDir, true /* isProd */)
if (cliOptions.outDir) { if (cliOptions.outDir) {
options.outDir = cliOptions.outDir options.outDir = cliOptions.outDir
} }
......
...@@ -20,7 +20,7 @@ module.exports = async function dev (sourceDir, cliOptions = {}) { ...@@ -20,7 +20,7 @@ module.exports = async function dev (sourceDir, cliOptions = {}) {
const { frontmatterEmitter } = require('./webpack/markdownLoader') const { frontmatterEmitter } = require('./webpack/markdownLoader')
logger.wait('\nExtracting site metadata...') logger.wait('\nExtracting site metadata...')
const options = await prepare(sourceDir) const options = await prepare(sourceDir, false /* isProd */)
// setup watchers to update options and dynamically generated files // setup watchers to update options and dynamically generated files
const update = () => { const update = () => {
......
...@@ -11,6 +11,10 @@ class PluginContext { ...@@ -11,6 +11,10 @@ class PluginContext {
}) })
} }
get isProd () {
return this._options.isProd
}
get sourceDir () { get sourceDir () {
return this._options.sourceDir return this._options.sourceDir
} }
......
...@@ -22,8 +22,17 @@ module.exports = class Plugin { ...@@ -22,8 +22,17 @@ module.exports = class Plugin {
// but also own the inheritance context. // but also own the inheritance context.
plugin = plugin(pluginOptions, Object.create(this._pluginContext)) plugin = plugin(pluginOptions, Object.create(this._pluginContext))
} }
plugin = Object.assign(plugin, { name: inferPluginName(pluginRaw, plugin) })
this.applyPlugin(plugin) plugin = Object.assign({
enabled: true,
name: inferPluginName(pluginRaw, plugin)
}, plugin)
if (plugin.enabled) {
this.applyPlugin(plugin)
} else {
logger.debug(`\n${chalk.gray(`[vuepress-plugin-${plugin.name}]`)} disabled.`)
}
return this return this
} }
......
...@@ -6,9 +6,10 @@ const resolvePlugin = require('./resolvePlugin') ...@@ -6,9 +6,10 @@ const resolvePlugin = require('./resolvePlugin')
const { genRoutesFile } = require('./codegen') const { genRoutesFile } = require('./codegen')
const { writeTemp } = require('./util') const { writeTemp } = require('./util')
module.exports = async function prepare (sourceDir) { module.exports = async function prepare (sourceDir, isProd) {
// 1. load options // 1. load options
const options = await resolveOptions(sourceDir) const options = await resolveOptions(sourceDir)
options.isProd = isProd
const { markdown } = options const { markdown } = options
// 2. resolve plugin // 2. resolve plugin
......
...@@ -2,6 +2,7 @@ const path = require('path') ...@@ -2,6 +2,7 @@ const path = require('path')
module.exports = (options, context) => ({ module.exports = (options, context) => ({
name: 'active-header-links', name: 'active-header-links',
enable: context.isDev,
// This mixin will be applied to the root component of each page. // This mixin will be applied to the root component of each page.
clientRootMixin: path.resolve(__dirname, 'mixin.js') clientRootMixin: path.resolve(__dirname, 'mixin.js')
}) })
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册