折腾了两天，终于把这个做成了能打包成浏览器加载的插件了

姑且在这里记录一下，也算是前端学习笔记

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
📦src
 ┣ 📂assets
 ┃ ┣ 📂icon
 ┃ ┃ ┣ 📜128.png
 ┃ ┃ ┣ 📜16.png
 ┃ ┃ ┗ 📜48.png
 ┃ ┗ 📂styles
 ┃ ┃ ┣ 📜global.scss
 ┃ ┃ ┣ 📜options.scss
 ┃ ┃ ┗ 📜popup.scss
 ┣ 📂background
 ┃ ┗ 📜background.ts
 ┣ 📂components
 ┃ ┣ 📂ui
 ┃ ┃ ┗ 📜button.vue
 ┃ ┣ 📜options.vue
 ┃ ┗ 📜popup.vue
 ┣ 📂options
 ┃ ┣ 📜options.html
 ┃ ┗ 📜options.ts
 ┣ 📂popup
 ┃ ┣ 📜popup.html
 ┃ ┗ 📜popup.ts
 ┣ 📂scripts
 ┃ ┣ 📂base
 ┃ ┃ ┣ 📂enums
 ┃ ┃ ┃ ┗ 📜url.ts
 ┃ ┃ ┗ 📜extConfig.ts
 ┃ ┣ 📜hotKeyMenu.ts
 ┃ ┣ 📜ui.ts
 ┃ ┣ 📜util.ts
 ┃ ┗ 📜viv.ts
 ┣ 📂typings
 ┃ ┣ 📜global.d.ts
 ┃ ┗ 📜hotKeyMenu.d.ts
 ┣ 📂_locales
 ┃ ┣ 📂en
 ┃ ┃ ┗ 📜messages.json
 ┃ ┣ 📂ja
 ┃ ┃ ┗ 📜messages.json
 ┃ ┗ 📂zh_CN
 ┃ ┃ ┗ 📜messages.json
 ┣ 📜btools.ts
 ┣ 📜manifest.json
 ┗ 📜vue-shims.d.ts

作用

不清楚这么分好不好，姑且来说说它们都有什么作用

_locales 存的是多语言文件

assets 是图标和 sass 文件，图标会在打包时直接复制到编译后的目录

components 放的是 vue 组件，目前只有俩，之后随着需要添加

background 插件的 background.js 所需要的，这个不需要页面所以只放了一个 .ts

options 插件的配置页面

popup 插件右上角弹出页面

scripts 插件功能所需要的代码文件，里面那些 ui 啥的我还没想好怎么写，姑且先放着

btools.ts 插件功能的入口文件，这个文件会引入scripts中的所有插件功能相关的文件

manifest.json 插件配置文件

具体写法

这些是怎么打包成一个插件的呢，用popup举个例子

首先是webpack.config.js指定好入口文件

1
2
3
4
5
6
entry: {
	btools: './src/btools.ts',
	background: './src/background/background.ts',
	popup: './src/popup/popup.ts',
	options: './src/options/options.ts',
},

入口文件是popup.ts

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue';
import Popup from '@components/popup';
import '@styles/popup';

export default new Vue({
  data: { test1: 'World' },
  components: {
    Popup
  },
  render: h => h(Popup)
}).$mount('#app');

这里面引入了 Vue、popup.vue、popup.sass

然后 popup.vue 是这么写的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts">

import { Vue, Component } from 'vue-property-decorator';

// @Component 修饰符注明了此类为一个 Vue 组件
@Component
export default class Popup extends Vue {
  // 初始数据可以直接声明为实例的 property
  message = 'Popup';
}

</script>

popup.sass没写啥就不用看了

最后页面会输出到popup.html上

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>popup</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

这个HTML文件是个模板，使用插件html-webpack-plugin，最后会打包到编译后的目录，这里指定了chunks是只让这个页面引入options.js

1
2
3
4
5
6
7
8
9
new HtmlWebpackPlugin({
	filename: 'options.html',
	template: './src/options/options.html',
	minify: {
		collapseWhitespace: true,
		removeComments: true
	},
	chunks: ['options']
})

最后配置好manifest.json，就可以直接用浏览器导入插件看效果了

manifest.json可以用一个叫write-json-webpack-plugin，这个插件可以加载.json文件，转成一个对象，就可以修改

使用这个比如这样可以修改版本号和根据浏览器做不同的修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let manifestJSON = require('./src/manifest.json')

// 版本号
manifestJSON.version = '2.1.0'

// 火狐浏览器
manifestJSON.browser_specific_settings = {
	'gecko': {
		'id': 'mail@imba97.cn',
		'strict_min_version': '57.0'
	}
}
manifestJSON.applications = {
	'gecko': {
		'id': 'mail@imba97.cn',
		'strict_min_version': '57.0'
	}
}

最后在使用插件把修改后的对象打包成.json文件

1
2
3
4
5
6
(manifestJSON && new WriteJsonWebpackPlugin({
	pretty: false,
	object: manifestJSON,
	path: '/',
	filename: 'manifest.json'
}))

这个方法是从bilibili-helper抄来的，大佬的插件，可以说是看B站网页版必装的插件

先总结到这里，今后边学 Vue 边学 TypeScript 边学 Webpack 边开发，大概会更新文章

本插件也放在了 Github 上，有兴趣的话可以看看 Btools-vue