时间戳

首页 > 解决方案 > 是否可以通过 storybook.js 的 preview-head.html 文件访问 webpack 配置属性？

ejs - 是否可以通过 storybook.js 的 preview-head.html 文件访问 webpack 配置属性？

问题描述

我正在尝试将 storybook.js 添加到我的 react 项目中，并且我需要将一个先决条件脚本添加到每个故事书页面中，以便呈现一些自定义组件。

脚本的 URL 需要在 webpack 配置中动态自动生成。

这个故事书文档的故事渲染部分提到了一个preview-head.html脚本标签可以通过它注入到最终的索引 HTML 文件中。

我想知道它是否支持像下面这样的 EJS 语法，以便我访问 HtmlWebpackPlugin 的配置选项值。

<script src="<%= htmlWebpackPlugin.options.foobar %>"></script>

标签： ejsstorybook

解决方案

作为一种解决方法，我在preview.js文件中编写了一个装饰器，以故意将<script />标签插入到带有动态生成src字段的故事书 iframe 中。

const loadAssets = () => {
  const scriptElement = document.createElement('script');

  // scriptElement.src = /* dynamically generated from dependencies */; 

  document.querySelector('head').appendChild(scriptElement);
};
const AssetLoader = props => {
  React.useEffect(() => loadAssets(), []);
  return <>{props.children}</>;
};
const assetLoaderDecorator = storyFn => (
  <AssetLoader>{storyFn()}</AssetLoader>
);

addDecorator(assetLoaderDecorator);

这有点笨拙，但目前可以达到目的。

灵感来自https://github.com/jhta/storybook-external-links。

推荐阅读