storybook配置之基本配置和webpack配置
默认配置
Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其与vue cli的webpack配置非常相似
开始学习Storybook配置
学习内容(Table of Contents)
- Babel
ES2016+ Support
babelrc support
- Webpack
CSS Support
Image and Static File Support
JSON Loader
- NPM Modules
Babel
我们用Babel来转换es6语法,下面是一些Storybook’s Babel 配置的关键点:
ES2016+ Support
我们已经添加了ES2016 支持,除此之外(In addition to that),我们还添加了一些实验性(experimental )的功能,比如对象扩展和异步等待,检查我们的资源来学习更多的插件
.babelrc support
如果你的项目已经有了.babelrc文件,我们会用你的.babelrc文件替换我们的.babelrc文件,所以你可以在你的项目中使用任何babel插件和presets
Webpack
我们使用webpack来管理和加载js模块,我们已经添加了一些比较不错的webpack配置,
CSS Support
你可以随意的引入css文件,不管这个css文件在哪里
基本上(Basically),你可以这样引入css文件:
// from NPM modules
import 'bootstrap/dist/css/bootstrap.css';
// from local path
import './styles.css';
注意:这只是引入css文件,如果你想引入sass less这种,你需要配置webpack
警告:使用Angular脚手架的storybook默认不支持引入css,必须先配置webpack,或者使用内联的引入语法:
import '!style-loader!css-loader!./styles.css';
Image and Static File Support
你也可以使用js引入图片或视频,如下:
import React from 'react';
import { storiesOf } from '@storybook/react';
import imageFile from './static/image.png';
storiesOf('<img />', module)
.add('with a image', () => (
<img src={imageFile} alt="covfefe" />
));
当你开始构建storybook的时候,我们也会将你引入的图片导出,所以,这是一个非常不错的方法(approach )去引入你的静态资源
JSON Loader
你可以导入json格式文件,就像node.js做的一样,这还允许您使用NPM项目,该项目将在其中导入.json文件。
NPM Modules
支持nmp包
webpack配置
Default mode
下面是我们提供一个webpack.config.js文件,该文件使用commonjs module风格导出一些webpack 4的配置
Extend Mode
你可以通过返回一个对象来生成一个扩展配置
比如说(Let’s say)你想添加一个sass支持在你的sorybook项目中,那该怎么做呢(This is how to do it),把下面的内容放在你的webpack.config.js文件中,默认在.storybook文件夹下面
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../")
}
]
}
};
因为这个webpack.config.js文件已经在你的storybook目录中,你需要设置包含路径,如果你的配置文件在其他的目录,对应的上面的代码的路径地方你要改一下
你也可以像上面一样去导入style、css、sass等loader
一旦你创建好webpack.config.js文件,storybook不会再引入默认的webpack.config.js文件了,但是对于babel loader还是使用默认的,使用你自己的webpack.config.js也会导致一些引入功能失效,比如svg引入,在下面会说明如何保持之前的引入规则
Supported Webpack Options
你可以在上面的代码总添加任何种类的webpack配置,不论是plugins, loaders, or aliases,但是你不会下面的配置选项:
-entry
-output
-js loader with babel
对于高级用法,我们强烈推荐全控制模式
Full Control Mode
有时候,你想对于wbepack配置文件有一个完全的控制,也许你想为你的开发环境添加一个不同的配置文件,你可以使用我们的全控制模式.
为了实现它,你需要导出一个方法在上面的代码中:
const path = require("path");
// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
// configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
storybookBaseConfig.module.rules.push({
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
include: path.resolve(__dirname, "../")
});
// Return the altered config
return storybookBaseConfig;
};
storybook使用上面方法中返回的配置,所以,请小心的(with care)编辑storybookBaseConfig ,确保下面的选项一定要存在:
-entry
-output
-first loader in the module.loaders (Babel loader for JS)
-all existing plugins
如果你的自定义的webpack配置文件使用了一个没有显示指明引用文件扩展名的loader,那很有必要从该加载程序中排除(exclude).ejs文件扩展名
Full control mode + default
也许你希望保持storybook默认的webpack配置,然后只需要扩展他,如果这样的话,在使用全控制模式下,将下面的内容放到你的webpack配置文件中:
const path = require("path");
module.exports = (baseConfig, env, defaultConfig) => {
// Extend defaultConfig as you need.
// For example, add typescript loader:
defaultConfig.module.rules.push({
test: /\.(ts|tsx)$/,
include: path.resolve(__dirname, "../src"),
loader: require.resolve("ts-loader")
});
defaultConfig.resolve.extensions.push(".ts", ".tsx");
return defaultConfig;
};
使用已存在的配置(Using Your Existing Config)
也许你已经有一个已经存在的webpack配置,所以你需要拷贝一些配置然后粘贴到你的webpack.config.js中
但是你不需要这样做,你可以向下面那样做:
-在你的webpack配置文件中引入那个已存在的webpack配置文件,然后使用里面的loader和plugins
自定义的Babel配置
Storybook默认会加载自己的.babelrc文件然后加载里面的配置,但是有时候一些配置可能会导致storybook报错
在那种情况下,你可以提供一个自己的.babelrc文件,你只需要创建一个文件名字叫.babelrc放在.storybook目录里就好了
然后storybook只会加载你的那个.babelrc文件
自定义html头
有时候,你可能需要在html头部加载不同的标签,这对于添加web字体或一些外部脚本非常有用。
很容易实现这些,只需要创建一个文件叫preview-head.html,在.storybook目录里,然后在文件里面写一些标签:
<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>try{ Typekit.load(); } catch(e){ }</script>
这样,Storybook 就会包含这些标签
注意:storybook只会将这些标签放在iframe 里面,而不会放在主UI界面中
添加标签到主UI上
此外,你可能需要添加不同的scripts或者标签到主ui上,当您的自定义Webpack配置输出或需要额外的块时,可能会出现(arise)这种情况
创建一个文件叫manager-head.html放在.storybook目录里
注意:你的scripts脚本可能会运行在主UI上,也要注意(aware),这是一个不同寻常的方案可能会使主ui挂掉,所以请小心使用
使用环境变量
有时候,我们需要使用环境变量,比如说主题颜色,一些客户端的秘钥,或者一个json字符串,我们通常倾向于硬编码他们
但是你需要显示的配置这些环境变量,你需要在环境变量前加上STORYBOOK_前缀
比如,我们向下面这样声明两个环境变量:
STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
然后我们可以在js代码中获取这些环境变量
const out = console;
out.log(process.env.STORYBOOK_THEME);
out.log(process.env.STORYBOOK_DATA_KEY);
虽然(Even though)我们可以获取这些环境变量在任何地方,你最好只在stories 或者Storybook配置文件里面使用它
Build time environment variables
你也可以传递这些环境变量当你使用build-storybook来构建你的storybook 的时候
然会他们会被硬编码到你的storybook静态版本中
NODE_ENV env variable
注意上面的加前缀的环境变量,你也可以使用NODE_ENV 作为环境变量,但是,通常你不需要这样做,因为我们已经帮你做好了
-当运行npm run storybook时候,我们会设置NODE_ENV 为 ‘development’
-当构建storybook的时候,我们会设置NODE_ENV 为production
脚手架选项
Storybook 附带两个使用工具,他们是start-storybook和build-storybook
这里有一些选项你可以传递他们去修改storybook的行为,我们在之前的文档中已经看到过了
下面是所有的选项
对于start-storybook
Usage: start-storybook [options]
Options:
--help 输出有用的信息
-V, --version 输出版本号
-p, --port [number] 设置storybook运行的端口号
-h, --host [string] 设置storybook运行的host
-s, --static-dir <dir-names> 设置加载静态资源的目录,以逗号分隔(comma-separated list)
-c, --config-dir [dir-name] 设置加载storybook配置文件的目录
--https 使用https运行storybook,注意:你必须提供你的证书信息
--ssl-ca <ca> 提供权威的ssl证书
--ssl-cert <cert> 提供ssl证书
--ssl-key <key> 提供ssl秘钥
--smoke-test 成功启动后退出
--ci CI模式()
--quiet 禁止(Suppress ) 冗长(verbose )的输出信息
对于build-storybook
Usage: build-storybook [options]
Options:
-h, --help 输出有用的信息
-V, --version 输出版本号
-s, --static-dir <dir-names> 加载静态资源的目录,以逗号隔开(comma-separated list)
-o, --output-dir [dir-name] storybook构建输出的目录
-c, --config-dir [dir-name] 设置加载storybook配置文件的目录
-w, --watch 观察模式
storybook配置之基本配置和webpack配置的更多相关文章
- webpack 配置 Vue 多页应用 —— 从入门到放弃
webpack 配置 Vue 多页应用 -- 从入门到放弃 一直以来,前端享有无需配置,一个浏览器足矣的优势,直到一大堆构建工具的出现,其中 webpack 就是其中最复杂的一个,因此出现了一个新兴职 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack配置备份
package.json: { "name": "webpackTest", "version": "1.0.0", & ...
- webpack配置详解
webpack配置详解 先点个赞吧,再挨个点下面的连接,觉得不值这个赞的回来骂我啊. Webpack傻瓜式指南(一) Webpack傻瓜指南(二)开发和部署技巧 Webpack傻瓜式指南 原生的官网详 ...
- Webpack配置示例和详细说明
/* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...
- vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- webpack配置报错:invalid configuration object.webpack has been initialisted using a configuration objcet that does not match thie API schema
最近接收了别人的项目,webpack配置总是报错如下:最后找到了解决办法,在此分享一下: 错误情况: 解决办法: 将package.json里面的colors删除掉即可
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
随机推荐
- ShowWindow 隐藏、显示、最大化、最小化窗口
#include <Windows.h> #include <tchar.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTA ...
- Fiddler抓包【5】_Fiddler过滤
1.User Fiters启用 2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存: 3.Hosts过滤 Z ...
- git目录
git学习网站 https://backlog.com/git-tutorial/cn/intro/intro1_1.html
- spring boot jpa 整合
1,Eclipse JPA Tool配置 https://www.cnblogs.com/wgslucky/p/10109300.html 2,项目地址 https://gitee.com/wgslu ...
- redis 字符串(string)函数
字符串(string)函数 get 命令/方法/函数 Description Get the value related to the specified key 取得与指定的键值相关联的值 Para ...
- laravel composer
composer config -g repo.packagist composer https://packagist.phpcomposer.com 改安装包的全局镜像网址
- Instrumentation接口详解
Instrumentation接口位于jdk1.6包java.lang.instrument包下,Instrumentation指的是可以独立于应用程序之外的代理程序,可以用来监控和扩展JVM上运行的 ...
- 2018-2019-2 20165316 《网络对抗技术》 Exp6 信息搜集与漏洞扫描
2018-2019-2 20165316 <网络对抗技术> Exp6 信息搜集与漏洞扫描 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应 ...
- SQL进阶1:case表达式的用法示例
一:case表达式的用法 1.SQL中的case表达式的作用是用来对"某个变量"进行某种转化,通常在select字句中使用,举个例子: 不能看出,case表达式很像我们的if el ...
- centos7将网卡名字改成eth样式
ll /etc/sysconfig/grub lrwxrwxrwx 1 root root 17 Jun 12 2016 /etc/sysconfig/grub -> /etc/default/ ...