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

Question

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

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

storybook 文档的 Story rendering 部分提到了一个 preview-head.html 通过它可以将脚本标签注入最终索引 HTML 文件。

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

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

Answer 1

作为变通方法，我在 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。

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

Is it possible to access webpack config properties through the preview-head.html file for storybook.js?

ejs

storybook