TypeScript 参数属性不适用于 Storybook + Rollup（在开发环境中）

Question

TypeScript 带有一个名为 parameter properties 的有用功能，用于将构造函数参数转换为具有相同名称和值的 class 属性。但是，由于某些原因，在将 TypeScript 与 Storybook 和 Rollup 一起使用时，构造函数属性不会转换为 class 属性。

示例代码：

my_class.ts

class Params {
  constructor(
    public property: number
  ) {}
}

在开发 Storybook 环境中（使用 yarn storybook 启动），Params.property 是 undefined 并且无法访问。

这是我的配置文件：

rollup.config.js

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

const packageJson = require('./package.json');

export default {
    input: 'src/index.ts',
    output: [
        {
            file: packageJson.main,
            format: 'cjs',
            sourcemap: true,
        },
        {
            file: packageJson.module,
            format: 'esm',
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(),
        resolve(),
        commonjs(),
        typescript({
            tsconfig: './tsconfig.json',
        }),
    ],
};

package.json

{
    "name": "cursor-ui",
    "version": "0.1.0",
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.16.0",
        "@rollup/plugin-commonjs": "^21.0.1",
        "@rollup/plugin-node-resolve": "^13.0.6",
        "@rollup/plugin-typescript": "^8.3.0",
        "@storybook/addon-actions": "^6.4.9",
        "@storybook/addon-essentials": "^6.4.9",
        "@storybook/addon-links": "^6.4.9",
        "@storybook/react": "^6.4.9",
        "@types/react": "^17.0.35",
        "babel-loader": "^8.2.3",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "rollup": "^2.60.0",
        "rollup-plugin-peer-deps-external": "^2.2.4",
        "rollup-plugin-typescript2": "^0.31.0",
        "styled-components": "^5.3.3",
        "themeprovider-storybook": "^1.8.0",
        "typescript": "^4.5.2"
    },
    "peerDependencies": {
        "react": "^16.8.0",
        "react-dom": "^16.8.0",
        "styled-components": ">= 5"
    },
    "dependencies": {},
    "scripts": {
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook",
        "build": "rollup -c"
    },
    "main": "lib/index.js",
    "module": "lib/index.esm.js",
    "types": "lib/index.d.ts",
    "files": [
        "src",
        "lib"
    ]
}

tsconfig.js

{
    "compilerOptions": {
        "target": "es5",
        "rootDir": "./src",
        "outDir": "./lib",
        "lib": ["dom", "dom.iterable", "esnext"],
        "declaration": true,
        "declarationDir": "./",
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "downlevelIteration": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "lib"]
}

.storybook/main.js

module.exports = {
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'themeprovider-storybook/register'],
};

据我所知，Storybook 在底层使用了 webpack。是否有一些配置需要更改？还是其他原因导致的问题？

注意： 编译库（使用 yarn build）后，输出似乎是正确的 class 属性。该问题仅在开发过程中出现。

Answer 1

此问题是由 known bug in Storybook 引起的。作为解决方法，将以下代码片段添加到 .storybook/main.js:

babel: async options => {
        return {
            ...options,
            plugins: options.plugins.filter(x => !(typeof x === 'string' && x.includes('plugin-transform-classes'))),
        };
    },

请参阅链接的 GitHub 问题以获得更多详细信息和解释。

TypeScript 参数属性不适用于 Storybook + Rollup（在开发环境中）

TypeScript parameter properties not working with Storybook + Rollup (in development environment)

typescript

rollupjs

storybook