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 أيضًا لـ Typescript ts-loader. تحقق من الحزم المسموح بها ، يمكنك إدخال اسم الحزمة الخاص بك هناك. أخذت أيضًا في الاعتبار فكرة أنه يبدو أنه يكفي أن يكون الإصدار الحالي من Razzle بدون تكوين خارجي مخصص ، ولكن قد تكون مهتمًا أيضًا بحل 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؟