开发一个插件

vayne 插件的本质是提供 loader plugins 配置和 依赖 不同插件扩展的配置应该是独立的，互不干扰。默认插件的是全局的 不管是生成环境还是开发环境的会使用插件的配置和依赖 之后会考虑提供新的接口 针对 开发环境和生成环境

一个插件如下

const _ = require('lodash')
const StyleLintPlugin = require('stylelint-webpack-plugin')

// 默认配置
const defaultOptions = {
  files: ['src/**/*.vue', 'src/**/*.scss'],
  syntax: 'scss'
}

/**
 *
 * vayne stylelint 插件
 * @param {any} config vayne 配置
 * @param {any} log  vayne log
 * @param {any} utils vayne 工具库
 * @returns webpack stylelint plugins
 */
class VaynePluginStyleLint {
  constructor(config, log) {
    log.debug('开始解析 vayne stylelint 插件')
    let styleLint = config.styleLint || {}
    let opts = _.defaultsDeep(defaultOptions, styleLint)
    if (styleLint.files) {
      opts.files = _.union(defaultOptions.files, styleLint.files)
    }
    log.debug(opts)
    this.name = 'VaynePluginStyleLint'

    return {
      plugins: [
        new StyleLintPlugin(opts)
      ]
    }
  }
}

module.exports = VaynePluginStyleLint

规定

• 插件必须 定义 name 如 VaynePluginStyleLint
• 插件使用 vayne-plugin-* 命名
• 插件 必须返回 一个对象 如是webpack 插件返回plugins 如果是loader 则返回 loaders
• beforePlugins 在webpack 最开始插入插件 （这里的插件的是指webpack 插件）
• afterPlugins 在webpack 最后插入插件 可参考vayne-plugin-qiniu

配置

• 插件所需的配置 通过 config 返回命名以插件 名为准 如: vayne-plugin-styleLint 插件 配置在vayne 配置中写在 对象styleLint 中 如下

'use strict'
module.exports = {
  plugins: [
    'vayne-plugin-vue',
    'vayne-plugin-stylelint'
  ],
  styleLint: {
    files: ['scss/**/*.scss'],
    syntax: 'scss'
  },
  dev: {
    showEslintErrorsInOverlay: true,
    proxyTable: {
      '/v2': {
        target: 'https://api.douban.com/',
        changeOrigin: true
      }
    }
  }
}

依赖

所需依赖配置在 package.json 的 dependencies 内

{
  "dependencies": {
    "stylelint-webpack-plugin": "^0.9.0"
  }
}

使用

最后可发布在npm 中 使用 npm 或者yarn 来安装使用 以可直接require 引入访问 如下

'use strict'
const path = require('path')

module.exports = {
  plugins: [
    // require('./vayne.plugin.angular') 直接使用
    'vayne-plugin-angularjs' //  npm 使用
    // 'angularjs' npm 简写使用
  ],
  externals: {
    'angular': 'angular',
    'angular-ui-router': '"ui.router"',
    'angular-animate': '"ngAnimate"',
    'angular-aria': '"ngAria"',
    'angular-material': '"ngMaterial"',
    'jquery': 'jQuery'
  }
}