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

配置

webpack

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

支持 Typescript

tsc --initnpm 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 vuenpm i vue-loader -Dnpm 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 -Dnpm 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 -Dnpm 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定位查询浏览器插件
老虎优惠券浏览器插件

原文转载：http://www.shaoqun.com/a/508744.html

跨境电商：https://www.ikjzd.com/

bsci 认证：https://www.ikjzd.com/w/2339

parser：https://www.ikjzd.com/w/680

配置webpacknpmiinit--ynpmiwebpack-Dnpmiwebpack-cli-Dnpmi@types/firefox-webext-browser@types/chrome-D//浏览器扩展API提示支持Typescripttsc--initnpmitypescriptts-loader-D设置tsconfig.json配置文件{"compilerOptions&qu
tm商标：tm商标
雨果网：雨果网
巴克莱：巴克莱
解密独立站谷歌SEO！亚马逊卖家也能快速上手！：解密独立站谷歌SEO！亚马逊卖家也能快速上手！
2020莲花山睡莲展好看吗？番禺莲花山睡莲展怎么样？：2020莲花山睡莲展好看吗？番禺莲花山睡莲展怎么样？