轻松配置前端项目装饰器，开启代码优雅之旅！

前端

2023-04-08 05:59:27

装饰器在前端项目中的配置指南

装饰器简介

装饰器是一种特殊的函数，可用来增强或修改其他函数的行为。在 JavaScript 中，使用 @ 符号来修饰函数，即可实现对函数的增强或修改。例如，我们可以使用装饰器来记录函数的执行时间，或检查函数参数的合法性。

构建系统中的装饰器配置

在现代前端项目中，使用装饰器需要在构建系统中进行精心的配置。主流前端构建系统包括 Webpack、Rollup 和 Vite。

Webpack

安装 babel-plugin-transform-decorators 插件：npm install --save-dev babel-plugin-transform-decorators
在 .babelrc 文件中添加装饰器插件：

{
  "plugins": ["transform-decorators"]
}

Rollup

安装 rollup-plugin-babel 插件：npm install --save-dev rollup-plugin-babel
在 rollup.config.js 文件中添加装饰器插件：

import babel from 'rollup-plugin-babel';

export default {
  plugins: [
    babel({
      plugins: ['transform-decorators']
    })
  ]
}

Vite

安装装饰器插件：npm install --save-dev @babel/plugin-transform-decorators
在 vite.config.js 文件中添加装饰器插件：

import { defineConfig } from 'vite';
import babel from '@babel/vite';

export default defineConfig({
  plugins: [
    babel({
      plugins: ['@babel/plugin-transform-decorators']
    })
  ]
})

代码示例

// 定义记录函数执行时间的装饰器
function measureTime(target) {
  const originalFunction = target;

  // 重新定义函数，记录执行时间
  target = function (...args) {
    const startTime = Date.now();
    const result = originalFunction.apply(this, args);
    const endTime = Date.now();
    console.log(`Function "${originalFunction.name}" took ${endTime - startTime} milliseconds to execute.`);
    return result;
  };

  // 返回装饰后的函数
  return target;
}

// 使用装饰器修饰函数
@measureTime
function add(a, b) {
  return a + b;
}

// 调用函数，输出执行时间
console.log(add(1, 2));