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                           觀察模式