Question

我还在项目中使用babel 7和webpack 4。（我正在使用react-native-web和native-base-web；在网络上运行我的react代码）

我遇到一个问题，其中模块解析程序中的别名未应用于node_modules目录内。（其他插件也是如此，它们不会应用在node_modules目录中）

在webpack中，我已明确指定这些模块将包含在babel-loader中。（请参见下面的代码）

我当前正在使用一种解决方法-我已将这些模块安装在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;

babel-plugin-module-resolver（^ 3.2.0）在babel 7中的node_modules内部不起作用

0 个答案: