Merge pull request #8 from chengpeiquan/develop

Develop

Author: chengpeiquan

.babelrc

@@ -5,14 +5,14 @@
       {
         "modules": false,
         "targets": {
-          "browsers": "> 1%, IE 11, not op_mini all, not dead"
+          "browsers": "> 1%, IE 11, not op_mini all, not dead",
+          "node": "current"
         },
         "useBuiltIns": "usage",
         "corejs": 2
       }
-    ]
+    ],
+    "@babel/preset-typescript"
   ],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties"
-  ]
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.editorconfig

@@ -1,15 +1,15 @@
-# http://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-max_line_length = 80
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = 0
-trim_trailing_whitespace = false
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1 @@
+dist/*

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    commonjs: true,
+    es2021: true,
+    node: true,
+    jest: true,
+  },
+  extends: ['eslint:recommended', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 13,
+  },
+  plugins: ['@typescript-eslint', 'prettier'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'prettier/prettier': 'warn',
+  },
+}

.prettierignore

@@ -0,0 +1,3 @@
+dist
+*.md
+*.xlsx

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -16,30 +16,43 @@ English | [简体中文](https://github.com/chengpeiquan/vite-plugin-banner/blob
 
 Adds a banner to the top of each generated chunk.
 
-## Usage
-
 > ℹ️ **Only support for Vite 2.**
 
-### Install
+## Install
 
-Install the package from npm (or yarn).
+Install the package from npm (or yarn, or pnpm).
 
 ```bash
 npm install --save-dev vite-plugin-banner
 ```
 
+## Options
+
+Since `v0.2.0`, This plugin support a `String` or an `Object` to be the plugin options.
+
+Plugin Options Type|Description|Example
+:--|:--|:--
+string|The banner content|[Basic usage](#basic-usage)
+{ outDir: string; content: string }|content: The comment content of the banner<br>outDir: The output directory from vite|[Optional parameter format](#optional-parameter-format)
+
+## Usage
+
+In most cases, just use the `String` format as a plugin option.
+
+In some special cases, such as in [VitePress](https://vitepress.vuejs.org/), you need to use `Object` format to pass in plugin options, see [Optional parameter format](#optional-parameter-format).
+
 ### Basic usage
 
 Add it to `vite.config.ts`
 
 ```ts
 // vite.config.ts
-import Banner from 'vite-plugin-banner'
+import banner from 'vite-plugin-banner'
 // Other dependencies...
 
 export default defineConfig({
   plugins: [
-    Banner('This is the Banner content.'),
+    banner('This is the banner content.'),
   ]
 })
 ```
@@ -49,7 +62,7 @@ When you run `npm run build` on your project, In the `dist` folder(Or the [build
 e.g. in `app.b3a7772e.js`:
 
 ```js
-/* This is the Banner content. */
+/* This is the banner content. */
 var e=Object.assign;import{M as t,d as a,u as r,c......
 ```
 
@@ -60,7 +73,6 @@ Of course, the most ideal banner is related to your package information.
 First, You need to update your `package.json` like this, For example, it contains such field content:
 
 ```json
-// package.json
 {
   "name": "chengpeiquan.com",
   "version": "0.1.0",
@@ -79,7 +91,7 @@ import pkg from './package.json'
 
 export default defineConfig({
   plugins: [
-    Banner(`/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`),
+    banner(`/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`),
   ]
 })
 ```
@@ -113,7 +125,7 @@ Such as:
 // vite.config.ts
 export default defineConfig({
   plugins: [
-    Banner(`
+    banner(`
     ██   ██         ███████   ██      ██ ████████   ██    ██   ███████   ██     ██
     ░██  ░██        ██░░░░░██ ░██     ░██░██░░░░░   ░░██  ██   ██░░░░░██ ░██    ░██
     ░██  ░██       ██     ░░██░██     ░██░██         ░░████   ██     ░░██░██    ░██
@@ -143,6 +155,40 @@ Run `npm run build`,  e.g. in `app.d9a287b8.js`:
 var e=Object.assign;import{M as t,d as a,u as r,c......
 ```
 
+### Optional parameter format
+
+I'm not sure what other scenarios besides VitePress need to use this method to pass in options, so I use VitePress as an example, I hope it can give you a reference
+
+```ts
+// docs/.vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import banner from 'vite-plugin-banner'
+import pkg from '../../package.json'
+
+const outDir = '../dist'
+
+export default defineConfig({
+  // Specify the output directory for packaging
+  outDir,
+
+  // Use Vite plugins
+  vite: {
+    plugins: [
+      // Please remember to use the options in Object format here
+      banner({
+        outDir,
+        content: `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`,
+      }),
+    ],
+  },
+  // ...
+})
+```
+
+Why do it?
+
+Because in VitePress, what you get through `viteConfig.build.outDir` is always a `.temp` temporary directory, not the final output directory, so you need to manually specify the output directory to inform the plugin
+
 ## License
 
-MIT License © 2021 [chengpeiquan](https://github.com/chengpeiquan)
+MIT License © 2021 [chengpeiquan](https://github.com/chengpeiquan)

README.zh-CN.md

@@ -16,30 +16,43 @@
 
 为每个 chunk 文件头部添加 banner 注释。
 
-## 用法
-
 > ℹ️ **只支持 Vite 2.**
 
-### 安装
+## 安装
 
-从 npm (或者 yarn) 安装：
+从 npm (或者 yarn 或者 pnpm) 安装：
 
 ```bash
 npm install --save-dev vite-plugin-banner
 ```
 
+## 选项
+
+从 `v0.2.0` 开始, 这个插件支持使用 `String` 或者 `Object` 格式来作为插件选项。
+
+插件选项类型|作用描述|使用例子
+:--|:--|:--
+string|横幅注释的内容|[基础用法](#基础用法)
+{ outDir: string; content: string }|content: 横幅注释的内容<br>outDir: 来自 Vite 指定的输出目录|[可选参数格式](#可选参数格式)
+
+## 用法
+
+在大多数情况下，只需使用 `String` 格式作为插件选项。
+
+在一些特殊情况下，比如在 [VitePress](https://vitepress.vuejs.org/) 中，需要使用 `Object` 格式来传递插件选项，详见 [可选参数格式](#可选参数格式) 。
+
 ### 基础用法
 
 在 `vite.config.ts` 添加：
 
 ```ts
 // vite.config.ts
-import Banner from 'vite-plugin-banner'
+import banner from 'vite-plugin-banner'
 // Other dependencies...
 
 export default defineConfig({
   plugins: [
-    Banner('This is the Banner content.'),
+    banner('This is the banner content.'),
   ]
 })
 ```
@@ -49,7 +62,7 @@ export default defineConfig({
 例如，在生成的 `app.b3a7772e.js` 里:
 
 ```js
-/* This is the Banner content. */
+/* This is the banner content. */
 var e=Object.assign;import{M as t,d as a,u as r,c......
 ```
 
@@ -60,7 +73,6 @@ var e=Object.assign;import{M as t,d as a,u as r,c......
 首先，你需要更新你的 `package.json` 文件，像这样，包含类似的字段内容：
 
 ```json
-// package.json
 {
   "name": "chengpeiquan.com",
   "version": "0.1.0",
@@ -79,7 +91,7 @@ import pkg from './package.json'
 
 export default defineConfig({
   plugins: [
-    Banner(`/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`),
+    banner(`/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`),
   ]
 })
 ```
@@ -113,7 +125,7 @@ var e=Object.assign;import{M as t,d as a,u as r,c......
 // vite.config.ts
 export default defineConfig({
   plugins: [
-    Banner(`
+    banner(`
     ██   ██         ███████   ██      ██ ████████   ██    ██   ███████   ██     ██
     ░██  ░██        ██░░░░░██ ░██     ░██░██░░░░░   ░░██  ██   ██░░░░░██ ░██    ░██
     ░██  ░██       ██     ░░██░██     ░██░██         ░░████   ██     ░░██░██    ░██
@@ -143,6 +155,40 @@ export default defineConfig({
 var e=Object.assign;import{M as t,d as a,u as r,c......
 ```
 
+### 可选参数格式
+
+我不确定除了 VitePress 还有哪些场景需要用到这种方式来传入选项，所以我用 VitePress 来举例，希望能给到你参考。
+
+```ts
+// docs/.vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import banner from 'vite-plugin-banner'
+import pkg from '../../package.json'
+
+const outDir = '../dist'
+
+export default defineConfig({
+  // 指定打包的输出目录
+  outDir,
+
+  // 使用 Vite 插件
+  vite: {
+    plugins: [
+      // 请记住在这里使用 Object 格式的选项
+      banner({
+        outDir,
+        content: `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`,
+      }),
+    ],
+  },
+  // ...
+})
+```
+
+为什么要这么做？
+
+因为在 VitePress 里，通过 viteConfig.build.outDir 拿到的永远是一个 `.temp` 的临时目录，不是最终的输出目录，所以你需要手动指定输出目录来告知插件。
+
 ## License
 
-MIT License © 2021 [chengpeiquan](https://github.com/chengpeiquan)
+MIT License © 2021 [chengpeiquan](https://github.com/chengpeiquan)

dist/checkComment.d.ts

@@ -0,0 +1,2 @@
+import type { PluginOptions, PluginConfig } from '../types';
+export default function (options: string | PluginOptions): PluginConfig;

dist/libs/getConfig.d.ts

@@ -0,0 +1 @@
+export default function (content: string): string;

dist/libs/verifyBanner.d.ts

@@ -1,2 +1,2 @@
-declare const banner: (comment: string) => any;
-export default banner;
+import type { PluginOptions } from './types';
+export default function (pluginOptions: string | PluginOptions): any;

dist/main.d.ts

@@ -0,0 +1,8 @@
+export interface PluginOptions {
+    content: string;
+    outDir?: string;
+}
+export interface PluginConfig {
+    content: string;
+    outDir: string;
+}