Node环境中配置ES6方案探索以及别名配置

用户3410631342793
1,230 阅读4分钟

前言： 最近在工作中，发现公司的node项目比较老旧， 写起来没有前端舒服，进行研究如何像前端一样配置别名，项目中虽然也能使用es6 语法，但是不能使用可选链等进行代码编写，研究发现是因为， 项目中支持es6编写的方式是安装了esm这个插件库进行编译，却不支持可选链等方式，接着尝试将package.json的方式改为type:'module'方式，但是这种方式也就不能使用require的模块化方式，对于比较老旧的插件和代码支持不友好

下面是对几种方式配置的心得与方案，供大家参考：

代码链接

方案一：使用babel(推荐)

对于E6的一些特性，因为目前所有的引擎并没有完全支持，比如说E6模块规范用到的export / import语句。那么，为了在浏览器或者node环境中能够执行ES6的代码，需要将ES6按照一定的规则转码成ES5。Babel工具就是做这个事情的。 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。 Babel官网：babeljs.io/

这里介绍在node环境中支持ES6代码的过程：

  1. 安装babel-cli工具
  2. 配置.babelrc配置文件
  3. 通过babel-node命令终端执行js文件
  4. 配置packjson文件，通过npm script命令执行js文件
  5. 安装配置module-alias 进行文件别名设置

babel-cli工具

Babel提供的babel-cli工具，用于命令行转码

1、创建项目 执行 npm init 进行项目创建这时候会出现package.json 文件

2、安装和babel相关的插件,使用 yarn 或者 npm

npm install  --save-dev nodemon @babel/cli @babel/core @babel/node @babel/preset-env

.babelrc配置文件

在项目的根目录下创建.babelrc文件，该文件用来设置转码规则和插件，基本格式如下

.babelrc 文件
{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

关于Babel转码说明以及nodemon

  • babel.config.js 是 Babel 执行时会默认在当前目录寻找的 Babel 配置文件。除了 babel.config.js，我们也可以选择用 .babelrc或 .babelrc.js 这两种配置文件，还可以直接将配置参数写在 package.json。它们的作用都是相同的，只需要选择其中一种。 我们将在另外一节详细介绍 Babel的配置文件，接下来默认使用 babel.config.js。
  • @babel/cli，@babel/core 与 @babel/preset-env
  • 是 Babel 官方的三个包，它们的作用如下：
1.  @babel/cli
    @babel/cli 是 Babel 命令行转码工具，如果我们使用命令行进行 Babel 转码就需要安装它

2.  @babel/cli
    @babel/cli 依赖 @babel/core，因此也需要安装 
 @babel/core 这个 Babel 核心 npm 包。

3.  @babel/preset-env
    @babel/preset-env 这个 npm 包提供了 ES6 转换 
 ES5 的语法转换规则，我们在 Babel 配置文件里指定使用它。如果不使用的话，也可以完成转码，但转码后的代码仍然是 ES6 的，相当于没有转码。
  • nodemon 一般只在开发时使用，它最大的长处在于 watch 功能，一旦文件发生变化，就自动重启进程。

babel-node命令

babel-node命令是babel-cli工具自带的一个命令，随babel-cli一起安装。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码 package.json中配置命令如下

 "start": "nodemon --exec babel-node ./index.js",

配置别名

在package.json中配置以下

  "_moduleAliases": {
    "@src": "src"
  }

然后在入口的index.js中引入

import 'module-alias/register.js'

虽然打包运行可以通过别名，但是 IDE 并不认识，在跟目录新建jsconfig.json或者tsconfig.json中配置如下：，

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "rootDir": ".",
    "paths": {
      "@config": ["src/config"],
      "@src/*": ["src/*"]
    }
  }
}

即可在项目中使用别名，具体代码可查看git 例如：

import { test } from '@src'
import { hello } from '@src/hello'
import { helloTest } from '@src/hello/hello-test'

方案二：使用esm配置使用es6

缺点： 但是此方法不可使用可选链，编译会报错，而且也不能使用module-alias进行别名配置

安装 esm 模块

npm install --save-dev esm

在package.json中也会配置运行脚本如下，即可

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel index.js",
    "start": "nodemon --exec babel-node ./index.js",
    "start1": "nodemon -r esm ./index.js"
  }

方法三：在package.json中配置支持es6

配置

type: "module"

缺点：此方法不可以在项目中使用module.export ,require等方式，但是对于很对旧项目可能会使用这些方式，迁移或者使用的过程中就会报错，对于最新项目可以使用，避免使用module.export ,require 等方式

感兴趣的可以了解下 type: "module"

www.ruanyifeng.com/blog/2020/0…

以上全是自己的实践，如果有不对的地方欢迎指教

avatar
文章
阅读
粉丝