Nx Storybook Webpack 'DEVELOPMENT' 模式

大佬教程收集整理的这篇文章主要介绍了Nx Storybook Webpack 'DEVELOPMENT' 模式，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Nx Storybook Webpack 'DEVELOPMENT' 模式？

我正试图让我的 Storybook 停止输出缩小的 Js 和随后的无法追踪的错误......这似乎是由于 Nx 开箱即用地配置 Webpack 的方式？我似乎无法弄清楚如何改变这一点

// .storybook/webpack.config.Js
/**
 * Export a function. Accept the base config as the only param.
 * @param {Object} options
 * @param {required<import('webpack').Configuration>} options.config
 * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
 */
module.exports = async ({ config,mode }) => {
  // Make whatever fine-grained changes you need

  // Return the altered config
  return config;
};

// .../.storybook/webpack.config.Js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const rootWebpackConfig = require('../../../.storybook/webpack.config');
/**
 * Export a function. Accept the base config as the only param.
 *
 * @param {Parameters<typeof rootWebpackConfig>[0]} options
 */
module.exports = async ({ config,mode }) => {
  config = await rootWebpackConfig({ config,mode });

  const tsPaths = new TsconfigPathsPlugin({
    configfile: './tsconfig.base.Json',});

  config.resolve.plugins
    ? config.resolve.plugins.push(tsPaths)
    : (config.resolve.plugins = [tsPaths]);
...

运行命令： nx run exampleApp:storybook

关于如何修复的任何想法？

解决方法

// webpack.config.js
config.plugins.forEach((plugin) => {
    if (plugin.constructor.name === 'DefinePlugin') {
      plugin.definitions['process.env'] = {
        NODE_ENV: JSON.Stringify('development'),NODE_PATH: JSON.Stringify(''),PUBLIC_URL: JSON.Stringify('.'),}
    }
  })

大佬总结

以上是大佬教程为你收集整理的Nx Storybook Webpack 'DEVELOPMENT' 模式全部内容，希望文章能够帮你解决Nx Storybook Webpack 'DEVELOPMENT' 模式所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。