Javascript TypeScript中带有Vue的Storybook如何从.Storybook.ts文件导入(网页包配置)?
我正在使用TypeScript中带有Vue的Storybook。在storybook中使用Vue有多种方法 如何配置网页包,以便在.storybook.ts中可以从另一个.storybook.ts文件导入? 目前我收到一个错误: ./src/components/Button/Button.stories.ts中的Javascript TypeScript中带有Vue的Storybook如何从.Storybook.ts文件导入(网页包配置)?,javascript,typescript,vue.js,webpack,storybook,Javascript,Typescript,Vue.js,Webpack,Storybook,我正在使用TypeScript中带有Vue的Storybook。在storybook中使用Vue有多种方法 如何配置网页包,以便在.storybook.ts中可以从另一个.storybook.ts文件导入? 目前我收到一个错误: ./src/components/Button/Button.stories.ts中的错误 未找到模块:错误:无法解析“../Icon/Icon.stories” 在“/Users/dude/monorepo/frontend/storybook/src/compone
错误
未找到模块:错误:无法解析“../Icon/Icon.stories”
在“/Users/dude/monorepo/frontend/storybook/src/components/Button”中
通过此导入:
从“/Button.vue”导入AppButton;
从“../Icon/Icon.stories”导入{iconPackOptions,iconPackDefaultValue};
当src/components/Icon/Icon.stories.ts文件包含以下内容时:
从'@storybook/vue'导入{storiesOf};
从“@storybook/addonknobs”导入{withKnobs,text,select};
从“/Icon.vue”导入AppIcon;
//旋钮分组
constgroupid01='icon';
//图标包
导出常量IConPackageOptions={
无:错,
FontAwesomeProRegular:“远”,
FontAwesomeFreeBrands:“工厂”
};
导出常量iconPackDefaultValue=iconPackOptions.FontAwesomeProRegular;
使用./.storybook/webpack.config.js文件内容:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: /\.css$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader'],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../assets/styles')
});
config.resolve = {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'assets': path.resolve('../src/assets'),
'@': path.join(__dirname, '../src'),
}
};
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
}
]
});
config.plugins.push(new ForkTsCheckerWebpackPlugin());
return config;
};
import { configure } from '@storybook/vue';
import '../src/plugins';
import '../src/assets/styles/main.scss';
const req = require.context('../src/components', true, /.stories.ts$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
使用./.storybook/config.js文件内容:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: /\.css$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader'],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../assets/styles')
});
config.resolve = {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'assets': path.resolve('../src/assets'),
'@': path.join(__dirname, '../src'),
}
};
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
}
]
});
config.plugins.push(new ForkTsCheckerWebpackPlugin());
return config;
};
import { configure } from '@storybook/vue';
import '../src/plugins';
import '../src/assets/styles/main.scss';
const req = require.context('../src/components', true, /.stories.ts$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
这个.storybook/webpack.config.js与storysource插件一起为我工作。如果您不需要storysource,只需将use loader对象与@storybook/addon storysource/loader一起删除即可:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: /\.css$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader'],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../assets/styles')
});
config.resolve = {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'assets': path.resolve('../src/assets'),
'@': path.join(__dirname, '../src'),
}
};
config.module.rules.push({
test: /\.stories\.ts?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader')
},
{
loader: require.resolve('@storybook/addon-storysource/loader')
}
]
});
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
}
]
});
config.plugins.push(new ForkTsCheckerWebpackPlugin());
return config;
};
作为快速修复,在导入行的顶部添加了这一行/@ts ignore
。