#默認配置 Storybook有一個默認的適合(suits)大型項目開發的webpack配置,假如你使用react app,他相似於建立一個react app的配置,並通過調整(tweaked ),使其與vue cli的webpack配置很是類似 開始學習Storybook配置css
學習內容(Table of Contents) - Babel ES2016+ Support babelrc support - Webpack CSS Support Image and Static File Support JSON Loader - NPM Moduleshtml
###Babel 咱們用Babel來轉換es6語法,下面是一些Storybook’s Babel 配置的關鍵點: ES2016+ Support 咱們已經添加了ES2016 支持,除此以外(In addition to that),咱們還添加了一些實驗性(experimental )的功能,好比對象擴展和異步等待，檢查咱們的資源來學習更多的插件 .babelrc support 若是你的項目已經有了.babelrc文件,咱們會用你的.babelrc文件替換咱們的.babelrc文件，因此你能夠在你的項目中使用任何babel插件和presetsvue
##Webpack 咱們使用webpack來管理和加載js模塊，咱們已經添加了一些比較不錯的webpack配置, CSS Support 你能夠隨意的引入css文件,無論這個css文件在哪裏 基本上(Basically),你能夠這樣引入css文件:node
// 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';react
###Image and Static File Support 你也可使用js引入圖片或視頻,以下:webpack
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 )去引入你的靜態資源es6
###JSON Loader 你能夠導入json格式文件,就像node.js作的同樣,這還容許您使用NPM項目，該項目將在其中導入.json文件。 NPM Modules 支持nmp包web
#webpack配置typescript
###Default mode 下面是咱們提供一個webpack.config.js文件,該文件使用commonjs module風格導出一些webpack 4的配置npm
###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 觀察模式