webpack-typescript-vue 浏览器插件开发配置

配置

webpack

npm i init --y npm i webpack -D npm i webpack-cli -D npm i @types/firefox-webext-browser @types/chrome -D    // 浏览器扩展API提示 

支持 Typescript

tsc --init npm i typescript ts-loader -D 

设置tsconfig.json配置文件

{     "compilerOptions": {         "target": "ES2016",         "module": "commonjs", // ts-node  不支持 commonjs 以外的任何模块语法         "allowJs": true,         "outDir": "./dist",         "rootDir": "./src",         "strict": true,         "moduleResolution": "node"     },     "exclude": ["node_modules"],     "include": ["./src/**/*.ts"] } 

让配置文件支持typescript

npm i ts-node @types/node @types/webpack -D 

创建webpack.config.ts配置文件

import path from "path"; import webpack from "webpack";  const config: webpack.Configuration = {     mode: "production",     entry: "./src/index.ts",     output: {         path: path.resolve(__dirname, "dist"),         filename: "[name].bundle.js",     },     module: {         rules: [             {                 test: /.tsx?$/,                 use: "ts-loader",                 exclude: /node_modules/,             },         ],     },     resolve: {         extensions: [".tsx", ".ts", ".js"],     }, };  export default config; 

配置package.json

{     "scripts": {         "build": "webpack --config webpack.config.ts"     } } 

测试对 typescript 支持

创建文件./src/index.ts

const test = <T>(value: T) => {     return value; }; const d = test(12);  console.log(d); 

在端执行 npm run build, 如果dist目录下生成了.bundle.js文件则成功

支持 vue

npm i vue npm i vue-loader -D npm i vue-template-compiler -D 

tsconfig.json文件调整

{     "exclude": ["node_modules", "dist"],     "include": ["./src/**/*.ts", "./src/**/*.vue", "./src/**/*.js"] } 

webpack.config.ts文件调整

const VueLoaderPlugin = require("vue-loader/lib/plugin"); {     module: {         rules: [             {                 test: /.vue$/,                 loader: "vue-loader",             },             {                 test: /.tsx?$/,                 loader: "ts-loader",                 options: {                     appendTsSuffixTo: [/.vue$/],                 },                 exclude: /node_modules/,             },         ],     },     plugins: [new VueLoaderPlugin()], } 

类写法需要安装

npm i vue-class-component -D npm i vue-property-decorator -D 

typescript只能解析ts文件，无法解析vue文件，所以要做一个模块声明

声明文件shims-vue.d.ts

declare module "*.vue" {     import Vue from "vue";     export default Vue; } 

支持 sass

npm i sass-loader node-sass  -D npm i style-loader css-loader sass-loader -D 

webpack.config.ts 配置文件调整

module: {         rules: [             ...             // 普通的 `.scss` 文件和 `*.vue` 文件中的             // `<style lang="scss">` 块都应用它             {                 test: /.scss$/,                 use: ["style-loader","css-loader", "sass-loader"],             },         ],     }, 

项目地址

https://gitee.com/whnba/dev-browser-plug-config.git

其他项目

ip定位查询浏览器插件
老虎优惠券浏览器插件