Closed seepine closed 2 years ago
+1
安装依赖
$ yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5
.storybook/main.js
里面加上 core: { builder: 'webpack5' }
;
具体代码:
const path = require('path');
const glob = require('glob');
const fs = require('fs-extra');
const packagePaths = glob.sync('packages/*');
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
function getLoaderForStyle(cssOptions) {
return [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: cssOptions,
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
];
}
module.exports = {
+ core: { builder: 'webpack5' },
stories: ['../packages/**/stories/*.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
webpackFinal: (config) => {
// 为 storybook 添加 packages 中项目的 alias
packagePaths.forEach((_path) => {
const packageJson = fs.readJsonSync(path.resolve(_path, 'package.json'));
const dirSourceFile =
packageJson.arcoMeta && packageJson.arcoMeta.type === 'vue-library'
? 'components'
: 'src';
config.resolve.alias[`${packageJson.name}$`] = path.resolve(
_path,
dirSourceFile
);
});
// less
config.module.rules.push({
test: lessRegex,
exclude: lessModuleRegex,
use: getLoaderForStyle(),
});
// less css modules
config.module.rules.push({
test: lessModuleRegex,
use: getLoaderForStyle({ modules: true }),
});
// svg modules
config.module.rules.push({
test: /\.svg$/,
use: ['vue-loader', 'vue-svg-loader'],
});
return config;
},
};
$ yarn dev
暂时测试是 builder改为webpack5后可用
- 安装依赖
$ yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5
- 运行
$ yarn dev
啊咧,我执行了你这句后运行,还是一样的错误
TypeError: Cannot read properties of undefined (reading 'get')
你arco init 是vue、组件库类型吗
你arco init 是vue、组件库类型吗
回看下我的回复,添加了一下webpack5的使用
你arco init 是vue、组件库类型吗
回看下我的回复,添加了一下webpack5的使用
还是不行 - - ,yarn dev 有报错,是不是我项目有问题,怎么报错说的stories目录没看到
建了空stories目录,yarn dev没报错了,控制台报错Uncaught ReferenceError: exports is not defined
,界面转圈圈
![]()
建了空stories目录,yarn dev没报错了,控制台报错
Uncaught ReferenceError: exports is not defined
,界面转圈圈
因为新建的项目是没有组件的,所以需要 yarn add:component Button
添加一个组件即可。
暂时测试是 builder改为webpack5后可用
- 安装依赖
$ yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5
.storybook/main.js
里面加上core: { builder: 'webpack5' }
;具体代码:
const path = require('path'); const glob = require('glob'); const fs = require('fs-extra'); const packagePaths = glob.sync('packages/*'); const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; function getLoaderForStyle(cssOptions) { return [ { loader: 'style-loader', }, { loader: 'css-loader', options: cssOptions, }, { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true, }, }, }, ]; } module.exports = { + core: { builder: 'webpack5' }, stories: ['../packages/**/stories/*.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], webpackFinal: (config) => { // 为 storybook 添加 packages 中项目的 alias packagePaths.forEach((_path) => { const packageJson = fs.readJsonSync(path.resolve(_path, 'package.json')); const dirSourceFile = packageJson.arcoMeta && packageJson.arcoMeta.type === 'vue-library' ? 'components' : 'src'; config.resolve.alias[`${packageJson.name}$`] = path.resolve( _path, dirSourceFile ); }); // less config.module.rules.push({ test: lessRegex, exclude: lessModuleRegex, use: getLoaderForStyle(), }); // less css modules config.module.rules.push({ test: lessModuleRegex, use: getLoaderForStyle({ modules: true }), }); // svg modules config.module.rules.push({ test: /\.svg$/, use: ['vue-loader', 'vue-svg-loader'], }); return config; }, };
- 运行
$ yarn dev
试了一下确实可行,我们更新一下项目模板的配置到 Webpack 5。
@MisterLuffy https://github.com/arco-design/arco-cli/issues/38#issuecomment-1170710705
Windows环境下依然报错,麻烦解决windows下的环境
Describe the bug 如标题
To Reproduce Steps to reproduce the behavior: 安装
npm i arco-cli -g
初始化arco init yourProjectName
Expected behavior 能成功执行
Screenshots![image](https://user-images.githubusercontent.com/93666053/174331729-ae9ab26a-77fe-4174-9c0e-7795508ba208.png)
Desktop (please complete the following information):
Other Content 虽然提示初始化完成,可以启动,但是执行![image](https://user-images.githubusercontent.com/93666053/174332264-d8d87338-4246-4307-8cda-fe9bd6382e04.png)
npm run dev
也是报错