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 в этом репо.

@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;
  },
};

Мне удалось проделать тот же трюк, что и @MrLoh , и для ts-загрузчика Typescript. Проверьте AllowPackages, вы можете вставить туда имя вашего пакета. Я также принял во внимание мысль, что кажется, что для текущей версии 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?