reactjs - 项目目录外的 node_modules 不被 Babel 转译(7)
问题描述
我正在编写一个基于Symfony4
and的应用程序,ReactJS
并且我正在使用 webpack encore 来构建一个包。该node_modules
目录也在项目之外并且是符号链接的 - 可能这是罪魁祸首,但我需要保留node_modules
在项目目录之外。
我遇到的问题与使用一些@foes/react-i18n-routing
由 React 组件 / HOC 组成的 npm 包(例如)有关,因此它们需要被转译,但 babel 没有这样做,结果我收到类似于此的错误:
error in ./node_modules/@foes/react-i18n-routing/dist/esm/component/withI18nRouting.js
Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type.
|
| export default Component => props => (
> <I18nRoutingContext.Consumer>{context => <Component i18nRouting={context} {...props} />}</I18nRoutingContext.Consumer>
| );
据我所知,当我使用时,Babel 7
我需要更改我的.babelrc
文件以babel.config.js
提供广泛的项目配置,但这还不够,我仍然面临这个问题。
谁能指出我正确的方向?
我尝试了各种配置,但我停止设置babelrcRoots
. 也许这是关键,但我无法正确设置。
这是目录结构:
ROOT/
├── node_modules/
└── project/
├── assets/
├── package.json
├── babel.config.js
└── webpack.config.js
这是babel.config.js
module.exports = function(api) {
api.cache(true);
const presets = ['@babel/preset-env', '@babel/preset-react'];
const plugins = [
'@babel/plugin-proposal-class-properties',
'transform-es2015-modules-commonjs',
'babel-plugin-dynamic-import-node'
];
// const babelrcRoots = ['.', '../node_modules/*']; ????
return {
presets,
plugins
};
};
这是webpack.config.js
const Encore = require('@symfony/webpack-encore');
const path = require('path');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.jsx')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableLessLoader()
.enableReactPreset();
let config = Encore.getWebpackConfig();
config.resolve.alias['App'] = path.resolve(__dirname, 'assets/js');
// config.resolve.modules = [path.resolve('./node_modules'), path.resolve('../node_modules')]; here's the another try with no luck
module.exports = config;
这是package.json
{
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"@symfony/webpack-encore": "^0.27.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"core-js": "^3.0.0",
"less-loader": "^4.1.0",
"prop-types": "^15.7.2",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@foes/react-i18n-routing": "^0.8.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"history": "^4.9.0",
"lodash.flatmap": "^4.5.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-router-named-routes": "0.0.23"
}
}
解决方案
您可以尝试配置到此处rootMode:"upward"
提到的设置,如下所示:
babel --root-mode upward src -d lib
或在 webpack 中
module: {
rules: [{
loader: "babel-loader",
options: {
rootMode: "upward",
}
}]
}
推荐阅读
- vba - Cat 零件锐边的自动化
- python - pandas pivot_table 和 value_counts 不同的结果
- python - 使用先前创建的编号变量运行单个 for 循环
- android - 我想将rest api与我自己的连接起来
价值观 - docker - Docker:是否可以获得从主机启动 docker 容器的完整命令行?如果是,如何?
- mysql - 页面索引更改时,分页器上的 Angular 7 和材料页面事件仅显示一个新行
- c# - converting hexa decimal ip address to dot notation decimal in c#
- xml - 如何匹配给定句子中的关键字以创建 Schematron 表达式 XSLT 2.0 或 3.0
- css - 更改 PDF 字体 (DJANGO)
- kubernetes - Helm template arithmetic division