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),
      }),
    ] : [];

...그 코드의 대부분이 이 리포지토리의 createConfig.js 에서 바로 복사됩니다.

@z 감사합니다!!

@zth 처음에 클라이언트 측에서 어떻게 작동하게 했습니까? 구성을 공유할 수 있습니까?

알겠습니다. babel-loader 의 포함을 확장해야 합니다. 또한 변환되지 않은 패키지 내의 .babelrc 에 지정되지 않는 한 babelOptions 을 명시적으로 설정해야 합니다. 앱 패키지에 /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를 사용하여 이 공통 파일을 새 파일로 청크하는 방법이 있습니까?