javascript - babel-plugin-root-import 与 babel 7

Question

我正在尝试设置 Babel 7。以前从未使用过 Babel，所以我真的是从头开始。我已成功安装并使用 @babel/plugin-proposal-optional-chaining，但我在 babel-plugin-root-import 上遇到困难。

这是我的 package.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 returned。

当我使用以下内容更改 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.js\dev\babel7\src/index.js:2:1)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Module._compile (C:\Node.js\dev\babel7\node_modules\pirates\lib\index.js:91:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Object.newLoader [as .js] (C:\Node.js\dev\babel7\node_modules\pirates\lib\index.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")();