babel-plugin-module-resolver (^ 3.2.0) не работает внутри node_modules в babel 7 - PullRequest
0 голосов
/ 28 марта 2019

Я также использую babel 7 и webpack 4 в моем проекте.(Я использую response-native-web и native-base-web; для запуска моего кода реакции в Интернете)

Я столкнулся с проблемой, когда псевдонимы в модуле распознавателя модулей не применяются внутри каталога node_modules,(то же самое верно и для других плагинов, они не применяются в каталоге node_modules)

В веб-пакете я явно указал эти модули для включения в babel-загрузчик.(см. код ниже)

В настоящее время я использую обходной путь - где я установил эти модули вне каталога node_modules.(когда они установлены вне корневой папки node_modules, мой конфиг babel работает на них.)

Было бы хорошо узнать, что может быть не так.Ниже приведены дополнительные сведения (фрагменты babel.config.js и webpack.config.js).


Фрагменты кода

Ниже приведен список и версииЯ использую плагины babel и webpack.

    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/polyfill": "^7.4.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/runtime": "^7.4.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^24.5.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-plugin-react-native-web": "^0.11.2",
    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
    "metro-react-native-babel-preset": "^0.53.1",
...
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1",

Моя конфигурация babel находится в файле babel.config.js в корневой папке.Он запускается, когда я запускаю webpack.

module.exports = function(api) {
    api.cache(true);

    const presets = [
        "module:metro-react-native-babel-preset"
    ];

    const plugins = [
        "transform-inline-environment-variables",
        [
            "module-resolver", {
                "root": ["."],
                "extensions": [".web.js", ".js", ".json"],
                "alias": {
                    "src": "./src",
                    "platform": "./src/platforms/messenger",
                    "react-navigation$": "@react-navigation/web",
                    "native-base-shoutem-theme": "./src/platforms/messenger/theme/native-base-shoutem-theme",
                    "@storybook/react-native": "@storybook/react",
                    "react-native": "react-native-web",
                    "native-base": "native-base-web",
                    "react/lib/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
                }
            }
        ],
        ["react-native-web", { "commonjs": true }],
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ];

    return {
        presets,
        plugins,
    }
}

И мой конфиг webpack такой, как показано ниже.(файл: web / .storybook / webpack.config.js)

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

var _path = require('path');

var _path2 = _interopRequireDefault(_path);

var _webpack = require('webpack');

var _webpack2 = _interopRequireDefault(_webpack);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var managerEntry = process.env.DEV_BUILD ? _path2.default.resolve(__dirname, '../../src/client/manager') : _path2.default.resolve(__dirname, '../manager');

var config = {
  devtool: '#cheap-module-eval-source-map',
  entry: {
    manager: [managerEntry],
    preview: [_path2.default.resolve(__dirname, './error_enhancements'), 'webpack-hot-middleware/client']
  },
  output: {
    path: _path2.default.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new _webpack2.default.HotModuleReplacementPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx|mjs|web\.js|web\.jsx)$/,
        exclude: /node_modules/,
        include: [
          /src/,
          /platform/,
          /node_modules\/native-base-shoutem-theme/,
          /node_modules\/react-navigation/,
          /node_modules\/react-native-web/,
          /node_modules\/react-native-vector-icons/,
          /node_modules\/react-native-keyboard-aware-scroll-view/,
          /node_modules\/react-native-drawer/,
          /node_modules\/react-native-easy-grid/,
          /node_modules\/react-native-safe-area-view/,
          /node_modules\/react-native-tab-view/,
          /node_modules\/native-base-web/,
          /node_modules\/static-container/,
        ],
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
        }
      },
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        loader: 'url-loader',
        query: { name: '[name].[hash:16].[ext]' }
      },
      {
        test: /\.scss$/,
        use: [
            "style-loader", // creates style nodes from JS strings
            "css-loader", // translates CSS into CommonJS
            "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.web.js', '.web.jsx', '.js', '.jsx', '.json'],
    "alias": {
      "react-native": "react-native-web",
      "native-base": "native-base-web",
      "react-native/Libraries/Renderer/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
      "react/lib/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
    }
  }
};

module.exports = config;
...