Babel 编译 ES6 时出现的 Cannot find module 问题解决方法

在进行前端开发的过程中，我们经常会使用到 ES6 的语法，但是浏览器不一定支持所有的 ES6 语法，因此需要使用 Babel 进行编译。但是在编译的过程中，有时会遇到 Cannot find module 的问题，这是什么原因呢？该怎么解决呢？

问题原因

在使用 Babel 编译的时候，有时会遇到如下错误：

Error: Cannot find module './app' from '/Users/username/dev/my-project'

这是因为在编译的过程中，Babel 默认使用的是相对路径查找模块，而有时候我们需要使用绝对路径，这就需要进行一些配置了。

解决方法

1. 在 .babelrc 文件中配置绝对路径

在 .babelrc 文件中，我们可以通过配置 root 字段来设置根路径，从而实现绝对路径引用。

例如，如果我们的项目根目录是 /Users/username/dev/my-project，我们可以将 .babelrc 文件中的内容修改为：

{
  "presets": ["@babel/preset-env"],
  "plugins": [],
  "root": "/Users/username/dev/my-project"
}

这样，就可以在代码中使用绝对路径进行模块引用了：

import app from '/src/app';

2. 使用 Babel 的模块解析插件

Babel 也提供了一个模块解析的插件——@babel/plugin-proposal-logical-assignment-operators，我们可以使用它来解决 Cannot find module 的问题。

首先需要安装该插件：

npm install @babel/plugin-proposal-logical-assignment-operators --save-dev

然后在 .babelrc 文件中添加该插件：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

这样就可以在代码中使用相对路径进行模块引用了：

import app from './app';

示例代码

下面是一个使用 Babel 编译 ES6 的示例代码：

.babelrc 文件：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"],
  "root": "/Users/username/dev/my-project"
}

app.js 文件：

export default {
  name: 'My App'
};

main.js 文件：

import app from '/src/app';

console.log(app.name);

总结

使用 Babel 编译 ES6 可以让我们的代码更具可读性和可维护性，但是有时候会遇到 Cannot find module 的问题，我们需要知道这是因为相对路径查找模块所造成的，然后可以通过设置绝对路径或使用模块解析插件来解决该问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522417895b1f8cacd9a882a