[Module开发报错解决记录]Couldn‘t find preset “@babel/env“ relative to directory

今天写前端项目的时候需要用到Module语法进行开发，而在测试的时候，因为前端测试方式十分麻烦，因此采用Nodejs方式进行Module语法测试，但Nodejs采用的是Commonjs的模块化规范，使用require引入模块；而import是ES6的模块化规范关键字。因此想要使用import，必须引入Babel转义支持，通过Babel进行编译，使其变成node的模块化代码。但是在配置完Babel开始测试的时候，在vs code终端输入“babel-node --presets env index.js”命令却出现报错，错误显示Couldn't find preset "@babel/env" relative to directory，于是一脸懵逼，在网上也找了好久，但发现相关的文章很少，也不能解决我遇到问题，搞得我差点都想放弃了，不过在我坚持不懈的不断尝试下，总算是把这个问题给解决了，瞬间心情舒畅😋，所以在学习技术的这条路上，还是得持之以恒，不能半途而废，遇到困难时再坚持一下，说不定就马上迎来转机，这种“山穷水尽疑无路，柳暗花明又一村”的心情相信各位读者都经历过吧，于是我就据此浅浅的记录一下，希望能帮到遇到和我同样问题正在苦苦寻找解决方法的读者。具体步骤如下。

 一、Babel安装流程

       如果还没安装Babel的话，需要先对Babel进行一个安装，其具体安装流程如下。

1、安装babel

       npm install --save-dev @babel/core

       这里需要注意的是，Babel要安装到项目的根目录下，以vs code为例，鼠标右键项目，选择在集成终端打开，输入以下命令即可。

npm install --save-dev @babel/core

2、配置文件

        Babel的配置文件是.babelrc，也是存放在项目的根目录下。使用Babel的第一步就是要配置这个文件。该文件是用来设置转码规则和插件，其基本格式如下。

{
    "presets": [],
    "plugins": []
}

3、 转码规则

        presets字段用来设定转码规则，官方提供以下的规则集，可以根据需要安装。

npm install --save-dev @babel/preset-env

 4、将规则加入.babelrc

        值得注意的是，后面的问题就是出在这里！😥

{
    "presets": [
        "@babel/env"
    ],
    "plugins": []
}

5、Babel命令行转码

        Babel提供命令行工具@babel/cli，用于命令行转码。

npm install --save-dev @babel/cli

        到这里Babel的安装已经基本完成啦。

二、采用Nodejs测试Module语法

        接下来就是如何通过Nodejs来测试Module语法，其步骤如下。

1、全局安装babel-cli

        注意是全局安装，windows + r建打开cmd，输入以下命令行完成全局安装。

npm install -g babel-cli

2、 安装babel-preset-env

        同样是在项目的根目录下通过以下命令行安装。

npm install -D babel-preset-env

3、运行代码

        其中index.js是你要使用Babel转义通过Nodejs测试的Module语法js文件。

babel-node --presets env index.js

        其中我的export测试js文件为hello.js，其中的js代码为。

export var Hello = "hello";

        我的import测试js文件为index.js，其中的js代码为。 

import { Hello } from './hello.js';
console.log(Hello);

        但当我通过“babel-node --presets env index.js”命令在终端测试运行的时候，却报出“Couldn't find preset "@babel/env" relative to directory”的错误，找了很久，试了很多次，才发现是.babelrc配置文件的问题，修改后便能成功测试运行了，修改后的配置如下。

{
    "presets": [
        "env"
        // "@babel/env"
        // "@babel/preset-env"
    ],
    "plugins": []
}

        可以看到，只需要单单一个“env”就可以了，测试运行结果也正常了。 

 好啦，以上就是本次记录，如果你也觉得有用的话，记得点赞收藏噢！