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定位查询浏览器插件
老虎优惠券浏览器插件