是否存在支持函数级JS装饰器的Babel插件？

Great question! I totally get why you'd be disappointed that function decorators aren't part of the current ES decorators proposal—they're incredibly convenient for adding cross-cutting logic (like logging, caching, or validation) to standalone functions without cluttering up the function itself.

First, to confirm what you noted: The TC39 decorators proposal (now at Stage 3, once linked to ES7 drafts) indeed only supports class and class method decorators, with function decorators removed from the standardized path (matching issue #31771856 you referenced). It's definitely a bummer for folks who love that clean, reusable syntax.

But good news—you can absolutely get function decorator support in Babel! The key is using the @babel/plugin-proposal-decorators plugin in legacy mode, which implements the earlier Stage 1 version of the decorators proposal that included function decorators.

Here's how to set it up: #

1. Install the necessary plugins (class properties often pairs with decorators for full compatibility):

   npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
   

2. Update your Babel config (e.g., .babelrc or babel.config.json) to enable legacy mode:

   {
     "plugins": [
       ["@babel/plugin-proposal-decorators", { "legacy": true, "decoratorsBeforeExport": true }],
       "@babel/plugin-proposal-class-properties"
     ]
   }
   

Example usage of a function decorator: #

Once configured, you can write decorators for regular functions just like you would for class methods:

// A simple logging decorator
function logExecution(target) {
  return function(...args) {
    console.log(`Running ${target.name} with arguments:`, args);
    const result = target(...args);
    console.log(`${target.name} returned:`, result);
    return result;
  };
}

@logExecution
function calculateSum(a, b) {
  return a + b;
}

calculateSum(3, 5);
// Logs: Running calculateSum with arguments: [3,5]
// Then: calculateSum returned: 8

A quick heads-up: Legacy mode uses older decorator semantics, which differ from the current Stage 3 proposal. If you're using class decorators alongside function decorators, you'll need to ensure your code aligns with this legacy behavior. There's also ongoing discussion in the TC39 committee about potentially reintroducing function decorators in a future iteration of the standard, but nothing's finalized yet.

内容的提问来源于stack exchange，提问作者yawn