Plugin Light

Plugin Light 是一个丰富、易用的工具集。

包含一些 Webpack 相关插件（25+），比如

一些 Webpack Loader（20+）

一些 Vite Plugin（28+）

一些项目基础配置

类型	命名	数量
项目配置	`project-config-*`	5
底层依赖	`plugin-light-*`, `import-meta-resolve`, `uni-read-pages-vite`	6
运行时工具	`ebus-light`, `share-light`, `vconsole-helper`	3
脚手架	`net-cli`	1
ESLint 共享配置	`eslint-config-*`	2
ESLint 插件	`eslint-plugin-*`	1
Stylelint 共享配置	`style-config-*`	1
Stylelint 插件	`style-plugin-*`	1
Vite 插件	`vite-plugin-*`	28
Webpack 插件	`webpack-plugin-*`	25
Webpack Loader	`webpack-loader-*`	20
Postcss 插件	`postcss-plugin-*`	2
PixUI 工具	`pixui-*`	2

当前子包共有 97 个。

安装

每个包名称不同，下面是一个示例：

bash

npm install -D @plugin-light/project-config-vite

插件使用示例

// vue.config.js

const { DispatchScriptPlugin } = require('@plugin-light/webpack-plugin-dispatch-vue');

let plugins = []

if (process.env.NODE_ENV === 'production') {
  // js分发
  plugins.push(new DispatchScriptPlugin());
}

module.exports = {
  configureWebpack: {
    plugins,
  }
}

Webpack Plugin、Vite Plugin、Project Config 均可以采用这种引入方式。

Loader 使用示例

每个 Webpack Loader 都会导出 LOADER 和 LOADER_PROD 两个变量，分别对应 loader.js、loader.prod.js 的文件路径。

业务可以像下面这样使用：

// vue.config.js

const { LOADER: ifdef } = require('@plugin-light/webpack-loader-ifdef');

module.export = {
  chainWebpack(config) {
    config.module
      .rule('ifdef-loader')
      // 根据项目实际配置文件类型
      .test(/press-ui.*(\.vue|\.ts|\.js|\.css|\.scss)$/)
      // 不要配成下面这样，会卡住
      // .test(/\.vue|\.ts|\.js|\.css|\.scss$/) 
      .use(ifdef)
      .loader(ifdef)
      .options({
        context: { H5: true },
        type: ['css', 'js', 'html'],
      })
      .end();
  }
}

Plugin Light ​

安装 ​

插件使用示例 ​

Loader 使用示例 ​

Plugin Light

安装

插件使用示例

Loader 使用示例