Razzle: 在 node_modules 中使用未编译的模块？

设法解决它。 备查：

原来webpack-node-externals在 SSR 期间应用和使用，这意味着node_modules中的模块不包含用于捆绑和转译。 我通过在我的razzle.config.js中做一些事情来解决它：

config.externals = target === 'node' ? [
      nodeExternals({
        whitelist: [
          dev ? 'webpack/hot/poll?300' : null,
          /\.(eot|woff|woff2|ttf|otf)$/,
          /\.(svg|png|jpg|jpeg|gif|ico)$/,
          /\.(mp4|mp3|ogg|swf|webp)$/,
          /\.(css|scss|sass|sss|less)$/,
          /^my-untranspiled-package/
        ].filter(Boolean),
      }),
    ] : [];

...大部分代码都是从这个 repo 中的createConfig.js复制而来的。

@zth谢谢！！

@zth你是如何让它在客户端工作的？ 你能分享你的配置吗？

好的，我想通了。 您需要扩展babel-loader的包含。 此外，您必须明确设置babelOptions ，除非它们在未转译包中的.babelrc中指定，否则在您的应用程序包中只有/babelrc是不够的。

这是一个完整的示例配置：

'use strict';
const nodeExternals = require('webpack-node-externals');
const fs = require('fs');

module.exports = {
  modifyBabelOptions() {
    return {
      presets: ['razzle/babel'],
      plugins: ['transform-flow-strip-types'],
    };
  },
  modify(config, { target, dev }, webpack) {
    // package un-transpiled packages
    const babelRuleIndex = config.module.rules.findIndex(
      (rule) => rule.use && rule.use[0].loader && rule.use[0].loader.includes('babel-loader')
    );
    config.module.rules[babelRuleIndex] = Object.assign(config.module.rules[babelRuleIndex], {
      include: [
        ...config.module.rules[babelRuleIndex].include,
        fs.realpathSync('./node_modules/untranspiled-package')
      ],
    });
    config.externals =
      target === 'node'
        ? [
            nodeExternals({
              whitelist: [
                dev ? 'webpack/hot/poll?300' : null,
                /\.(eot|woff|woff2|ttf|otf)$/,
                /\.(svg|png|jpg|jpeg|gif|ico)$/,
                /\.(mp4|mp3|ogg|swf|webp)$/,
                /\.(css|scss|sass|sss|less)$/,
                /^untranspiled-package/,
              ].filter(Boolean),
            }),
          ]
        : [];
    // return
    return config;
  },
};

对于 Typescript ts-loader，我也设法做到了与@MrLoh相同的技巧。 检查 allowedPackages，您可以在其中插入您的包名称。 我还考虑了一个想法，即当前版本的 Razzle 似乎没有自定义 config.externals 就足够了，但您可能也对原始的@MrLoh解决方案感兴趣（请参阅关于 config.externals 删除：https:// github.com/jaredpalmer/razzle/issues/842#issuecomment-475722036）

  const allowedPackages = ['my-component']

  const allowedPackagePaths = allowedPackages.map(packageName =>
    fs.realpathSync('./node_modules/' + packageName)
  )

  const tsRuleIndex = config.module.rules.findIndex(
    rule =>
      rule.use && rule.use[0].loader && rule.use[0].loader.includes('ts-loader')
  )

  if (tsRuleIndex === -1) {
    throw Error(
      'This component assumes that you are using ts-loader. If you are not using it, then you might need to check and test code for how would it work with other loaders'
    )
  }

  config.module.rules[tsRuleIndex] = {
    ...config.module.rules[tsRuleIndex],

    include: [
      ...config.module.rules[tsRuleIndex].include,
      ...allowedPackagePaths,
    ],
  }

  delete config.externals

这对我有用。 我的问题是，这些库在客户端和服务器包中被复制。 有什么方法可以使用 razzle.config.js 将这个常见的这个分块到一个新文件中？