Я также использую 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;