Razzle: नोड_मॉड्यूल्स में अनट्रांसपिल्ड मॉड्यूल के साथ प्रयोग?

इसे सुलझाने में कामयाब रहे। आगामी संदर्भ के लिए:

एसएसआर के दौरान webpack-node-externals लागू और उपयोग किया जाता है, जिसका अर्थ है कि बंडलिंग और इस प्रकार ट्रांसपिलिंग के लिए 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 की तरह ही ट्रिक करने में कामयाब रहा। अनुमत पैकेज जांचें, आप वहां अपना पैकेज नाम डाल सकते हैं। मैंने इस विचार को भी ध्यान में रखा कि ऐसा लगता है कि रैज़ल के वर्तमान संस्करण के लिए कस्टम 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 का उपयोग करके इस आम को एक नई फ़ाइल में बदलने का कोई तरीका?