Babel loader 不转译平台特定的导出

问题描述

我使用的是 react-native-web，我需要将自定义库转换为 es5，然后再将其与 react.js 一起使用。问题是 babel-loader 不处理平台特定组件的转译，并且构建失败。例如，我的库文件中有以下代码。

"use strict";
Object.defineProperty(exports,"__esModule",{ value: true });
exports.Cropper = void 0;
var Cropper = require('./Cropper').default; // This is not being resolved in babel loader
exports.Cropper = Cropper;
//# sourceMappingURL=index.js.map

我有 Cropper.native.tsx 和 Cropper.web.tsx 文件。这里，.web.tsx 组件应该在浏览器环境中使用。 我将这个库与 react.js 一起使用，我也设置了 Webpack babel-loader。这是webpack.config.js

const { resolve } = require('path');
const { readFileSync } = require('fs');
const Package = require('./package.json');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

const includeRegxObject = JSON.parse(readFileSync(resolve('./.nones5'),'utf-8'));
const includeRegx = new RegExp(includeRegxObject.source,includeRegxObject.flags);

const production = process.env.NODE_ENV === 'production';

const config = {
  mode: production ? 'production' : 'development',entry: {
    index: './src/index.ts',},output: {
    path: resolve(__dirname,'dist'),filename: `${Package.version}-bundle.js`,resolve: {
    extensions: ['.js','.jsx','.ts','.tsx'],alias: {
      'react-native$': 'react-native-web'
    }
  },module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)?$/,use: {
          loader: 'babel-loader',options: {
            presets: [
              "@babel/preset-env","@babel/preset-react","@babel/preset-typescript"
            ],cacheDirectory: true,plugins: [
              ['react-native-web',{ commonjs: true }],['@babel/plugin-proposal-export-default-from']
            ]           
          }
        },exclude: /node_modules\/(?!['foundation|react\-native\-modal])/
      },]
  },plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',filename: 'index.html',inject: 'body',}),],};

if (production) {
  config.optimization = {
    minimizer: [new TerserWebpackPlugin()],};
} else {
  config.devServer = {
    port: 9000,open: true,hot: true,compress: true,stats: 'errors-only',overlay: true,};
}

module.exports = config;

基本上，我正在转译 foundation 和 react-native-modal 依赖项。这是输出日志。当组件特定于平台时，babel-loader 无法转译。

./node_modules/foundation/lib/components/cropper/index.js 中的错误 找不到模块：错误：无法解析“/Applications/MAMP/htdocs/wp-content/plugins/Foundation/node_modules/foundation/lib/components/cropper”中的“./Cropper”
@ ./node_modules/foundation/lib/components/cropper/index.js 8:14-34
@ ./node_modules/foundation/lib/components/index.js
@ ./node_modules/foundation/lib/index.js
@ ./src/components/App.tsx
@ ./src/index.ts

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）