使用巴别塔导入 babel-plugin-root-import 7

Question

我正在尝试设置 Babel 7。以前从未使用过 Babel，所以我真的是从零开始。我已经设法安装和使用@babel/plugin-proposal-optional-chaining，但我正在努力解决babel-plugin-root-import.

这是我的包.json

//package.json
"scripts": {
"start": "nodemon src/index.js --exec babel-node"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.51",
"@babel/core": "^7.0.0-beta.51",
"@babel/node": "^7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51"
},
"dependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.51",
"@babel/polyfill": "^7.0.0-beta.51",
"babel-plugin-root-import": "^6.1.0"
}

//babel.config.js
module.exports = {
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-optional-chaining"],
["babel-plugin-root-import",{
"rootPathPrefix": "@"
}]
]
};

下面是我的代码：

//src/index.js
require("./foo/index.js")();
//src/foo/index.js
module.exports = function() {
console.log("Foo loaded")
}

当我执行上面的代码时，我在控制台中得到了Foo loaded。

当我更改 src/index 时.js如下所示：

//src/index.js
require("@/foo/index.js")();

我收到以下错误：

internal/modules/cjs/loader.js:596
throw err;
^
Error: Cannot find module '../foo/index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (C:Node.jsdevbabel7src/index.js:2:1)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Module._compile (C:Node.jsdevbabel7node_modulespirateslibindex.js:91:24)
at Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Object.newLoader [as .js] (C:Node.jsdevbabel7node_modulespirateslibindex.js:96:7)
at Module.load (internal/modules/cjs/loader.js:612:32)
[nodemon] app crashed - waiting for file changes before starting...

如果我没有在 babel.config.js 中设置 rootPathPrefix ，我也不能使用路径以 ~ 开头的插件，这应该是默认值。 怎么了？

非常感谢！

Answer 1

如果你直接用npx babel src/index.js运行 babel-cli 只是为了检查输出，你会发现根导入插件正在正确更改：

require("@/foo/index.js")();

到：

require("../foo/index.js")();

@(项目根目录(在src 文件夹内的index.js文件中正确替换为..

如果希望@引用root/src，可以设置"rootPathSuffix": "src"选项。如果没有该选项，您将必须执行以下操作：

require("@/src/foo/index.js")();