# 开发问题记录排查

# 1

Typescript 项目中导入图片时,报错

// src/shims-image.d.ts

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

# 2

解决中文输入法触发多次 input 和 keyup 事件的问题,关键词“组合输入”

let inputEl = document.querySelector("#input");
let composition = false;
inputEl.addEventListener("compositionstart", (e) => {
  composition = true;
});
inputEl.addEventListener("keyup", (e) => {
  if (composition) return false;
  inputEl.value = inputEl.value.replace(/[^\w]+$/g, "");
});
inputEl.addEventListener("compositionend", (e) => {
  composition = false;
  inputEl.value = inputEl.value.replace(/[^\w]+$/g, "");
});

# 3

美化打印信息

const Style = {
  base: ["color: #fff", "background-color: #444", "padding: 2px 4px", "border-radius: 2px"],
  warning: ["color: #eee", "padding: 2px 4px", "background-color: red"],
  success: ["color: #eee", "padding: 2px 4px", "background-color: green"]
};
const log = {};
for (const key in Style) {
  log[key] = (...message) => {
    console.log(`%c${message}`, Style[key].join(";"));
  };
}
log.base("Base");
log.warning("Warning");
log.success("Success");

# 4

webpack 开发和打包样式不一致