导出故事书包中的单个组件

1 回答

• 2

  根据请求的评论，我不久前解决了这个问题，不得不学习一些webpack，但基本上最终的结果是我现在有一个故事书 - >私人npm存储库 - >其他项目管道 . 这是我如何解决它 .

  .storybook .webpack.config.js就是这个 .

  const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
  const productionBuild = require("./webpack.prod");
  const developmentBuild = require("./webpack.dev");
  
  module.exports = (baseConfig, env) => {
      const config = genDefaultConfig(baseConfig, env);
      console.log(env);
      config.module.rules = [];
  
      if(env === "PRODUCTION") return productionBuild(config);
      if(env === "DEVELOPMENT") return developmentBuild(config);
  
      return config;
  };
  

  这将检查开发或 生产环境 版本，然后通过适当的文件运行它 . （我只是展示制作）

  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  // const DashboardPlugin = require('webpack-dashboard/plugin');
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  const autoprefixer = require("autoprefixer");
  const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
  
  module.exports = function(config) {
      config.entry = {};   // remove this line if you want storybook js files in output.
      config.entry["Components"] = ['./src/main.tsx'];
  
      config.output = {
          filename: 'dist/[name].bundle.js',
          publicPath: '',
          libraryTarget: "commonjs"
      };
  +
      config.module.rules.push({
          test: /\.(tsx?)$/,
          enforce: "pre",
          loader: require.resolve("tslint-loader")
      });
  
      config.plugins.push(new TsConfigPathsPlugin())
  
      config.module.rules.push({
          test: /\.(tsx?)$/,
          loader: require.resolve('awesome-typescript-loader'),
          options: {
              configFileName: 'tsconfig.prod.json'
          }
      });
  
      config.module.rules.push({
          test: /\.(scss)$/,
          use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: [
                  {
                      loader: 'css-loader',
                      options: {
                          url: false,
                          minimize: true,
                          sourceMap: false
                      }
                  },
                  {
                      loader: require.resolve('postcss-loader'),
                      options: {
                          ident: 'postcss',
                          sourceMap: false,
                          plugins: function plugins() {
                              return [
                                  require('postcss-flexbugs-fixes'),
                                  autoprefixer({
                                      browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
                                      flexbox: 'no-2009'
                                  })
                              ]
                          }
                      }
                  },
                  {
                      loader: require.resolve('sass-loader'),
                      options: {
                          sourceMap: false
                      }
                  },
              ]
          })
      });
  
      config.module.rules = config.module.rules.concat([
          {
              test: /\.json$/,
              loader: require.resolve('json-loader')
          },
          {
              test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
              loader: require.resolve('file-loader'),
              query: {
                  name: 'static/media/[name].[hash:8].[ext]'
              }
          },
          {
              test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
              loader: require.resolve('url-loader'),
              query: {
                  limit: 10000,
                  name: 'static/media/[name].[hash:8].[ext]'
              }
          }
      ]);
  
      config.resolve.extensions.push('.ts', '.tsx');
  
      config.externals = {
          react: {
              root: 'React',
              commonjs2: 'react',
              commonjs: 'react',
              amd: 'react'
          },
          'react-dom': {
              root: 'ReactDOM',
              commonjs2: 'react-dom',
              commonjs: 'react-dom',
              amd: 'react-dom'
          }
      };
  
      config.plugins.push(new UglifyJSPlugin());
  
      config.plugins.push(new ExtractTextPlugin({
          filename: '[name].css',
          disable: false,
          allChunks: true
      }));
  
  
      /* unneccessary logic below is to stop webpack dashboard stalling the production build  */
      // config.plugins.push({
      //      apply: function() {
      //          const dashboard = new DashboardPlugin({color: "cyan"});
      //          dashboard.apply.apply(dashboard, arguments)
      //      }
      //  }
      // );
  
      return config;
  };
  

  ^上面的代码是.storybook - > webpack.prod.js基本上它的作用是覆盖故事书使用的webpack的入口点作为默认值，如果你想要故事书资产我会建议你推送到config.entry而不是覆盖它 .

  webpack所做的是遍历依赖关系树，因此Main.tsx是一个单独的文件，只包含我想要导出的组件，所以我的包没有任何膨胀 .

  最后还有一些小的优化来减少bundle的大小（1） - Tree Shaking删除不常的导出（2） - ExtractTextPlugin来获取一个单独的CSS文件（3） - config.externals React和ReactDOM这意味着输出包不会包含React或ReactDOM，而不是它将在您导入的项目中查找那些库<<<<（重要）

  下面是Main.tsx（webpack入口点）

  export { BEMHelper } from "./utils/bem-helper/bem-helper";
  export { Button } from "./components/Button/Button";
  export { Checkbox } from "./components/Checkbox/Checkbox";
  ...etc etc etc repeat for every component you want to export in your bundle
  import "./styles/bootstrap.scss";
  

  最后如果你在你的打字稿配置中使用commonJS，这将是你的index.js（你的NPM包需要什么）

  export const BEMHelper = require("./storybook-static/dist/Components.bundle").BEMHelper;
  export const Button = require('./storybook-static/dist/Components.bundle').Button;
  ..... etc etc etc. (repeat)
  

  回复于 2024-05-11T20:37:15+08:00