如何在故事书+打字稿中使用通天塔情感插件?

Question

我目前正在将Storybook(v.5.3.18(与TypeScript一起使用，并已成功按照说明设置我的TypeScript webpack.config.js。这工作正常。

但是，我似乎找不到任何成功将 babel 插件添加到配置中的方法。我的最新尝试在下面，这不起作用。

module.exports = (baseConfig, env, config) => {
config.module.rules.push({
test: /.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
options: {
exclude: /node_modules/,
presets: [['react-app', { flow: false, typescript: true }]],
configFileName: './.storybook/tsconfig.json',
babelOptions: {
babelrc: false,
presets: [],
plugins: ['emotion'],
},
},
},
{
loader: require.resolve('react-docgen-typescript-loader'),
options: {},
},
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};

如果我使用此配置启动 Storybook，我继续看到消息"组件选择器只能与 babel-plugin-emotion 结合使用"，这意味着 Emotion babel 插件没有被 Storybook 拾取。

我没有使用CRA，只是普通的React和Typescript。

这是我的 tsconfig：

{
"compilerOptions": {
"outDir": "build/lib",
"module": "commonjs",
"strictNullChecks": true,
"skipLibCheck": true,
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"jsx": "react",
"noUnusedParameters": true,
"noUnusedLocals": true,
"noImplicitAny": true,
"noImplicitThis": true,
"declaration": true,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"target": "es5",
"lib": ["es5", "es6", "es7", "es2017", "dom"],
"sourceMap": true,
"types": ["react", "node"],
"baseUrl": "../",
"paths": {
"~*": ["./src*"],
"components": ["./src/components/*"],
"ui-components": ["./src/ui-components/*"],
"pages": ["./src/pages/*"],
"common": ["src/common/*"],
"mocks": ["./mocks/*"],
"lib": ["./lib/*"]
}
},
"include": ["src/**/*", "../src/typings.d.ts"],
"exclude": [
"node_modules",
"build",
"dist",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts",
"**/*/*.test.ts",
"examples"
]
}

和我的 .babelrc：

{
"presets": ["@babel/preset-react"],
"plugins": [
"inline-svg",
["emotion", { "inline": true }],
[
"module-resolver",
{
"root": ["."],
"alias": {
"~": "./src",
"common": "./src/common",
"components": "./src/components",
"ui-components": "./src/ui-components",
"lib": "./lib",
"pages": "./pages",
"static": "./public/static"
}
}
]
]
}

有什么建议吗？

谢谢。

Answer 1

我不知道是否可以解决您的问题，但是我通过在.storybook/main.js中使用此配置得到了我的：

module.exports = {
stories: ['../packages/**/*.stories.tsx'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
plugins: ['emotion'],
presets: [['react-app', { flow: false, typescript: true }]],
},
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
};

我没有使用任何自定义的 webpack 配置(除了那个(，有了这个，你在故事书上开发时不会有类型小鸡，所以你应该检查这是否符合你的需求。

希望它以某种方式有所帮助。

Answer 2

这个对我有用：

首先添加

devDependency:
"babel-plugin-emotion": "^10.0.33",

然后进入故事书主.js配置文件添加以下内容

module.exports = {
...
babel: async (options) => ({
...options,
plugins: ['emotion']
}),
...
}