Fatal编程技术网
  • javascript/
  • Javascript 使用巴别塔&x27；s`sourceRoot`不'；不影响进口

Javascript 使用巴别塔&x27；s`sourceRoot`不'；不影响进口

javascript webpack

Javascript 使用巴别塔&x27；s`sourceRoot`不'；不影响进口,javascript,webpack,babeljs,Javascript,Webpack,Babeljs,目前我可以做： require('./frontend/src/components/SomeComponent'); 但是如果我在我的webpack.config.js中设置以下内容： resolve: { root: path.resolve('frontend', 'src') } 我可以这样做： require('components/SomeComponent'); 问题是，当我不使用Webpack（例如在测试环境中）时，我所有的导入都会中断。根据Babel文档，sour

目前我可以做：

require('./frontend/src/components/SomeComponent');
但是如果我在我的
webpack.config.js
中设置以下内容：

resolve: {
    root: path.resolve('frontend', 'src')
}
我可以这样做：

require('components/SomeComponent');
问题是，当我不使用Webpack（例如在测试环境中）时，我所有的导入都会中断。根据Babel文档，
sourceRoot
属性设置“所有源都是相对的根”。这让我觉得我可以在我的
.babelrc
中添加以下内容来修复导入：

"sourceRoot": "frontend/src"
。。。但没有这样的运气。当我做
require（'components/SomeComponent'）babel节点中的code>失败。当我只是使用Babel来传输文件时，无论我是否设置了
sourceRoot
，
require
行都是相同的

所以，我的问题是，有没有办法（带或不带
sourceRoot
）在Babel中模拟webpack的
resolve.root


另外，我知道有几个Babel插件可以解决这个问题，但我看到的所有插件都要求您向
require
路径添加
~
（这当然会中断Webpack中的导入）。
许多项目都有Webpack+Babel，在许多项目中，您有时会绕过Webpack（如您的情况，用于测试）

在这种情况下，所有解析别名都应该位于babel中

有一些插件允许一方读取另一方的配置（以及类似的eslint插件等）