Skip to content

Commit 23a8cc4

Browse files
chengpeiquanchengpeiquan
authored
Merge pull request #1 from chengpeiquan/develop
Release v0.1.1
2 parents fa8ec5d + b230860 commit 23a8cc4

19 files changed

+2890
-1
lines changed

‎.babelrc‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": false,
7+
"targets": {
8+
"browsers": "> 1%, IE 11, not op_mini all, not dead"
9+
},
10+
"useBuiltIns": "usage",
11+
"corejs": 2
12+
}
13+
]
14+
],
15+
"plugins": [
16+
"@babel/plugin-proposal-class-properties"
17+
]
18+
}

‎.editorconfig‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
end_of_line = lf
7+
indent_size = 2
8+
indent_style = space
9+
insert_final_newline = true
10+
max_line_length = 80
11+
trim_trailing_whitespace = true
12+
13+
[*.md]
14+
max_line_length = 0
15+
trim_trailing_whitespace = false

‎.github/FUNDING.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# These are supported funding model platforms
2+
3+
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4+
patreon: # Replace with a single Patreon username
5+
open_collective: # Replace with a single Open Collective username
6+
ko_fi: # Replace with a single Ko-fi username
7+
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8+
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9+
liberapay: # Replace with a single Liberapay username
10+
issuehunt: # Replace with a single IssueHunt username
11+
otechie: # Replace with a single Otechie username
12+
custom: https://git.io/Sponsor

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md‎

Lines changed: 148 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,148 @@
1-
# vite-plugin-banner
1+
<p align='center'>
2+
<img src="https://cdn.jsdelivr.net/gh/chengpeiquan/assets-storage/img/2021/02/20210224005014.png" alt="vite-plugin-banner" />
3+
</p>
4+
5+
<p align='center'>
6+
<a href='https://www.npmjs.com/package/vite-plugin-banner'>
7+
<img src="https://img.shields.io/npm/v/vite-plugin-banner?color=56b7ff&label=npm" />
8+
</a>
9+
</p>
10+
<br>
11+
<br>
12+
13+
English | [简体中文](https://github.com/chengpeiquan/vite-plugin-banner/blob/main/README.zh-CN.md)
14+
15+
## Features
16+
17+
Adds a banner to the top of each generated chunk.
18+
19+
## Usage
20+
21+
> ℹ️ **Only support for Vite 2.**
22+
23+
### Install
24+
25+
Install the package from npm (or yarn).
26+
27+
```bash
28+
npm install --save-dev vite-plugin-banner
29+
```
30+
31+
### Basic usage
32+
33+
Add it to `vite.config.ts`
34+
35+
```ts
36+
// vite.config.ts
37+
import Banner from 'vite-plugin-banner'
38+
// Other dependencies...
39+
40+
export default defineConfig({
41+
plugins: [
42+
Banner('This is the Banner content.'),
43+
]
44+
})
45+
```
46+
47+
When you run `npm run build` on your project, In the `dist` folder(Or the [build.outDir](https://vitejs.dev/config/#build-outdir) in `vite.config.ts` you configured), Except for `vendor` files, all `js` and `css` files will add a banner to the top.
48+
49+
e.g. in `app.b3a7772e.js`:
50+
51+
```js
52+
/* This is the Banner content. */
53+
var e=Object.assign;import{M as t,d as a,u as r,c......
54+
```
55+
56+
### Advanced usage
57+
58+
Of course, the most ideal banner is related to your package information.
59+
60+
First, You need to update your `package.json` like this, For example, it contains such field content:
61+
62+
```json
63+
// package.json
64+
{
65+
"name": "chengpeiquan.com",
66+
"version": "0.1.0",
67+
"description": "My personal website, technology stack based on Vue.js 3.0, and Vite 2.0, use Server Side Generation.",
68+
"author": "chengpeiquan",
69+
"homepage": "https://chengpeiquan.com/"
70+
}
71+
```
72+
73+
Then, import the `package.json` into `vite.config.ts`, update the banner like this:
74+
75+
```ts
76+
// vite.config.ts
77+
import pkg from './package.json'
78+
// Other dependencies...
79+
80+
export default defineConfig({
81+
plugins: [
82+
Banner(`/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: v${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`),
83+
]
84+
})
85+
```
86+
87+
Run `npm run build`, you can see the banner become more detailed.
88+
89+
e.g. in `app.b3a7772e.js`:
90+
91+
```js
92+
/**
93+
* name: chengpeiquan.com
94+
* version: v0.1.0
95+
* description: vMy personal website, technology stack based on Vue.js 3.0, and Vite 2.0, use Server Side Generation.
96+
* author: chengpeiquan
97+
* homepage: https://chengpeiquan.com/
98+
*/
99+
var e=Object.assign;import{M as t,d as a,u as r,c......
100+
```
101+
102+
### Fun usage
103+
104+
If you want to make some banners that show your personality, you can make some interesting content from some online generators.
105+
106+
Such as:
107+
108+
- [http://www.network-science.de/ascii/](http://www.network-science.de/ascii/)
109+
110+
- [https://www.bootschool.net/ascii](https://www.bootschool.net/ascii)
111+
112+
```ts
113+
// vite.config.ts
114+
export default defineConfig({
115+
plugins: [
116+
Banner(`
117+
██ ██ ███████ ██ ██ ████████ ██ ██ ███████ ██ ██
118+
░██ ░██ ██░░░░░██ ░██ ░██░██░░░░░ ░░██ ██ ██░░░░░██ ░██ ░██
119+
░██ ░██ ██ ░░██░██ ░██░██ ░░████ ██ ░░██░██ ░██
120+
░██ ░██ ░██ ░██░░██ ██ ░███████ ░░██ ░██ ░██░██ ░██
121+
░██ ░██ ░██ ░██ ░░██ ██ ░██░░░░ ░██ ░██ ░██░██ ░██
122+
░██ ░██ ░░██ ██ ░░████ ░██ ░██ ░░██ ██ ░██ ░██
123+
░██ ░████████ ░░███████ ░░██ ░████████ ░██ ░░███████ ░░███████
124+
░░ ░░░░░░░░ ░░░░░░░ ░░ ░░░░░░░░ ░░ ░░░░░░░ ░░░░░░░
125+
`)
126+
]
127+
})
128+
```
129+
130+
Run `npm run build`, e.g. in `app.d9a287b8.js`:
131+
132+
```js
133+
/*
134+
██ ██ ███████ ██ ██ ████████ ██ ██ ███████ ██ ██
135+
░██ ░██ ██░░░░░██ ░██ ░██░██░░░░░ ░░██ ██ ██░░░░░██ ░██ ░██
136+
░██ ░██ ██ ░░██░██ ░██░██ ░░████ ██ ░░██░██ ░██
137+
░██ ░██ ░██ ░██░░██ ██ ░███████ ░░██ ░██ ░██░██ ░██
138+
░██ ░██ ░██ ░██ ░░██ ██ ░██░░░░ ░██ ░██ ░██░██ ░██
139+
░██ ░██ ░░██ ██ ░░████ ░██ ░██ ░░██ ██ ░██ ░██
140+
░██ ░████████ ░░███████ ░░██ ░████████ ░██ ░░███████ ░░███████
141+
░░ ░░░░░░░░ ░░░░░░░ ░░ ░░░░░░░░ ░░ ░░░░░░░ ░░░░░░░
142+
*/
143+
var e=Object.assign;import{M as t,d as a,u as r,c......
144+
```
145+
146+
## License
147+
148+
MIT License © 2021 [chengpeiquan](https://github.com/chengpeiquan)

‎README.zh-CN.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<p align='center'>
2+
<img src="https://cdn.jsdelivr.net/gh/chengpeiquan/assets-storage/img/2021/02/20210224005014.png" alt="vite-plugin-banner" />
3+
</p>
4+
5+
<p align='center'>
6+
<a href='https://www.npmjs.com/package/vite-plugin-banner'>
7+
<img src="https://img.shields.io/npm/v/vite-plugin-banner?color=56b7ff&label=npm" />
8+
</a>
9+
</p>
10+
<br>
11+
<br>
12+
13+
[English](https://github.com/chengpeiquan/vite-plugin-banner/blob/main/README.md) | 简体中文
14+
15+
## 功能
16+
17+
为每个 chunk 文件头部添加 banner 注释。
18+
19+
## 用法
20+
21+
> ℹ️ **只支持 Vite 2.**
22+
23+
### 安装
24+
25+
从 npm (或者 yarn) 安装：
26+
27+
```bash
28+
npm install --save-dev vite-plugin-banner
29+
```
30+
31+
### 基础用法
32+
33+
在 `vite.config.ts` 添加：
34+
35+
```ts
36+
// vite.config.ts
37+
import Banner from 'vite-plugin-banner'
38+
// Other dependencies...
39+
40+
export default defineConfig({
41+
plugins: [
42+
Banner('This is the Banner content.'),
43+
]
44+
})
45+
```
46+
47+
当你在你的项目上运行 `npm run build` 打包的时候，在 `dist` 文件夹（或者你在 `vite.config.ts` 配置的其他 [build.outDir](https://vitejs.dev/config/#build-outdir) ），除了 `vendor` 文件外，所有的 `js` 和 `css` 文件都会添加一个 banner 注释在文件顶部。
48+
49+
例如，在生成的 `app.b3a7772e.js` 里:
50+
51+
```js
52+
/* This is the Banner content. */
53+
var e=Object.assign;import{M as t,d as a,u as r,c......
54+
```
55+
56+
### 高级用法
57+
58+
当然，最理想的 banner 注释是和你的项目信息相关联。
59+
60+
首先，你需要更新你的 `package.json` 文件，像这样，包含类似的字段内容：
61+
62+
```json
63+
// package.json
64+
{
65+
"name": "chengpeiquan.com",
66+
"version": "0.1.0",
67+
"description": "My personal website, technology stack based on Vue.js 3.0, and Vite 2.0, use Server Side Generation.",
68+
"author": "chengpeiquan",
69+
"homepage": "https://chengpeiquan.com/"
70+
}
71+
```
72+
73+
然后，在你的 `vite.config.ts` 导入 `package.json`，像这样更新 banner 插件的内容：
74+
75+
```ts
76+
// vite.config.ts
77+
import pkg from './package.json'
78+
// Other dependencies...
79+
80+
export default defineConfig({
81+
plugins: [
82+
Banner(`/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: v${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`),
83+
]
84+
})
85+
```
86+
87+
运行 `npm run build` 打包, 你可以看到生成出来的 banner 注释更详细：
88+
89+
例如，在生成的 `app.b3a7772e.js` 里:
90+
91+
```js
92+
/**
93+
* name: chengpeiquan.com
94+
* version: v0.1.0
95+
* description: vMy personal website, technology stack based on Vue.js 3.0, and Vite 2.0, use Server Side Generation.
96+
* author: chengpeiquan
97+
* homepage: https://chengpeiquan.com/
98+
*/
99+
var e=Object.assign;import{M as t,d as a,u as r,c......
100+
```
101+
102+
### 趣味用法
103+
104+
如果你想制作一些个性化的 banner 注释，像什么表白啊、佛系啊、招聘信息啊什么的，可以通过一些在线生成器去制作有趣的内容。
105+
106+
比如在这些网站上可以直接生成:
107+
108+
- [http://www.network-science.de/ascii/](http://www.network-science.de/ascii/)
109+
110+
- [https://www.bootschool.net/ascii](https://www.bootschool.net/ascii)
111+
112+
```ts
113+
// vite.config.ts
114+
export default defineConfig({
115+
plugins: [
116+
Banner(`
117+
██ ██ ███████ ██ ██ ████████ ██ ██ ███████ ██ ██
118+
░██ ░██ ██░░░░░██ ░██ ░██░██░░░░░ ░░██ ██ ██░░░░░██ ░██ ░██
119+
░██ ░██ ██ ░░██░██ ░██░██ ░░████ ██ ░░██░██ ░██
120+
░██ ░██ ░██ ░██░░██ ██ ░███████ ░░██ ░██ ░██░██ ░██
121+
░██ ░██ ░██ ░██ ░░██ ██ ░██░░░░ ░██ ░██ ░██░██ ░██
122+
░██ ░██ ░░██ ██ ░░████ ░██ ░██ ░░██ ██ ░██ ░██
123+
░██ ░████████ ░░███████ ░░██ ░████████ ░██ ░░███████ ░░███████
124+
░░ ░░░░░░░░ ░░░░░░░ ░░ ░░░░░░░░ ░░ ░░░░░░░ ░░░░░░░
125+
`)
126+
]
127+
})
128+
```
129+
130+
执行 `npm run build` 打包, 还是在 `app.d9a287b8.js` ，现在变成了：
131+
132+
```js
133+
/*
134+
██ ██ ███████ ██ ██ ████████ ██ ██ ███████ ██ ██
135+
░██ ░██ ██░░░░░██ ░██ ░██░██░░░░░ ░░██ ██ ██░░░░░██ ░██ ░██
136+
░██ ░██ ██ ░░██░██ ░██░██ ░░████ ██ ░░██░██ ░██
137+
░██ ░██ ░██ ░██░░██ ██ ░███████ ░░██ ░██ ░██░██ ░██
138+
░██ ░██ ░██ ░██ ░░██ ██ ░██░░░░ ░██ ░██ ░██░██ ░██
139+
░██ ░██ ░░██ ██ ░░████ ░██ ░██ ░░██ ██ ░██ ░██
140+
░██ ░████████ ░░███████ ░░██ ░████████ ░██ ░░███████ ░░███████
141+
░░ ░░░░░░░░ ░░░░░░░ ░░ ░░░░░░░░ ░░ ░░░░░░░ ░░░░░░░
142+
*/
143+
var e=Object.assign;import{M as t,d as a,u as r,c......
144+
```
145+
146+
## License
147+
148+
MIT License © 2021 [chengpeiquan](https://github.com/chengpeiquan)

‎dist/checkComment.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare const checkComment: (comment: string) => string;
2+
export default checkComment;

‎dist/main.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import type { Plugin } from 'vite';
2+
declare const banner: (comment: string) => Plugin | unknown;
3+
export default banner;

0 commit comments

Comments
 (0)