storybook配置之基本配置和webpack配置

Easter79 等级 797 0 0

#默认配置 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                           观察模式
收藏
评论区

相关推荐

Vue进阶(幺柒柒):Vue应用Sass、Scss、Less和Stylus
Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: Sassnpm
webpack 基本配置
概念本 质上,webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。当 webpack处理应用程序时,它会递归地构建一个 依 赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle 。 安装确保安装了nodejs 项目文件环境cd
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
3、loader打包css和图片。
可以查看[官方中文文档](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdoc.webpack-china.org%2Fconcepts%2Floaders%2F%23%25E9%2585%258D%25E7%25BD%25AE-configuration-)。 **1、什么是loade
KO
KO -- KO是一个基于 Webpack开发的快速开始Web开发的脚手架工具,具有以下特性: * 可以当做一个Webpack配置种子来使用,无需二次配置、开箱即用 * 自动支持多页应用 * (可选)Vue单文件组件的开发方式 * 资源分块加载,内联和异步加载方式管理,低成本实现首屏优化 * 支
5、开发时热加载
我们开发代码的时候,如果没有热加载,每修改一次代码,都需要重新wepack打包才能生效。所以热加载在开发中是很有用的功能。 **1、安装热加载需要的包。** ================ 热加载需要用到一个包。 npm install --save-dev webpack-dev-server **2、启动webpack-dev-server。*
vite2 引入 vectorize
这个库在webpack中是正常的, 但是在vite2项目中无法使用也不报错, 只是结果总是空....看了下是个老项目了, 依赖的也都是好几年没更新的库... 看来webpack在兼容性方面还是要强不少的     尝试使用parcel打包后使用, 不太行... 用webpack打包后使用.... 也不行... 有时间再研究研究, 看看能不能写个类似的.
20k以上面试必问,Webpack原理和优化
我身边很多朋友都觉得 Webpack 不重要,认为只要团队里有人会就可以,而那个人不需要是自己。 那么我就给你一个必须学它的理由: **Webpack 原理和优化** ****工资20k以上的面试必问**** 如果你想拿到高薪,Webpack就是你绕不过去的一道门槛。 而即便不提面试,对于 每一个前端工程师来说
Sass预编译
sass基于Ruby               ruby的模块管理器叫gem   正规的安装方式是gem install sass                调用命令     sass    sass文件    css文件 **webpack编译sass**         需要的模块 style-loader  css-loader  sas
TypeScript 文件引入 Html (ts import html webpack)
我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦 1 安装 text-loader npm install text-loader --save-dev 2 webpack 配置里新增 text-loader 为文本加载器 module: { rules: [
Vue+Webpack配置css
  使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具。在针对css文件配置时遇到一个问题:打包构建时报错——Module build failed: Unknown word。   配置内容如下: {   test: /\.css$/,   use:
storybook配置之基本配置和webpack配置
#默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其与vue cli的webpack配置非常相似 开始学习Storybook配置 学习内容(Table of Contents) - Babel ES2016+
webpack配置typescript详解
随着现在typescript使用越来越多,作为打包工具界的webpack怎么编译typescript呢?下面我把自己的实践记录一下,成功编译了typescript文件,并且引入typescript模块后,也可以成功编译。我们从新建webpack项目开始,在此之前先贴一下环境,经常环境不同会造成不同的状况,这边先贴上的环境:$ node v v14.15.4$
webpack5学习笔记
我的前端之路笔记cdn资源 webpack笔记解决作用域问题快速执行函数;(function() .....)解决代码拆分问题nodecommonjs模块化解决浏览器支持问题requirejs想要主js调用别的js要在主js前引入hello.jsexport hello()main.jshello()import hello.jsimport main.j