nodejs ES6模块使用 以及 ES6代码转ES5兼容性处理

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

有些人平时编写模块时比较喜欢使用es6代码，但是如果我们想要编写一个属于自己的依赖包，要考虑他人的使用，有些人爱用es6模块，有些人仍保留commonjs的require导入。

希望自己的模块既能被es6形式import导入，也希望能同时兼容commonjs模块的require导入，我们在上传自己的npm包时就得考虑好这个问题。

本文介绍es6模块如何开启使用，并介绍如何使用babel对es6模块进行兼容性转换。

ES6模块

创建项目

新建文件夹，比如babel。

cd进项目文件夹位置，npm init -y 创建前端项目，会生成package.json文件。

npm init -y
复制代码

开启ES6模块

在package.json中添加"type":"module"，即可开启该项目的es6模块，就可以在项目中的js模块中使用es6的import导入啦。

测试

在项目下创建src文件夹，创建index.js，使用es6模块导出，并在test.js中导入使用。

// src/index.js
const add = (a, b) => {
    return a + b
}

//请使用非默认导出，因为默认导出转为es5兼容上传npm后
//默认导出会等于使用非默认导出导出一个default属性，那你还不如自己声明是啥属性。
export {add} 
复制代码

// src/test.js
import {add} from './index.js'

console.log(add(1, 2)) // 3
复制代码

兼容性处理

首先我们清楚一点，就是es6导入是向下兼容commonjs导入的，但是commonjs不支持es6的，也就意味着，我们在上传自己的npm包时，也就意味着我们需要将我们的es6项目转化为es5（也就是commonjs模块）项目。

babel

添加babel开发依赖。

npm i @babel/core @babel/cli @babel/preset-env -D
复制代码

在项目根目录编写配置文件babel.config.json。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}
复制代码

我们将src下的test.js删除，执行打包命令，以下命令会将src下所有文件转化为es5代码，至于打包位置可以自定义，以下代码将打包至lib文件夹中。

npx babel src --out-dir lib
复制代码

转化后的代码就可以打包上传至npm了，我们根据npm使用攻略上传。

注意，转化后的包可能会缺失一些新的需要的依赖，要记得在上传npm包前添加需要的新依赖。

上传之前

1. 先在package.json中把name改一个不会重复的名字。
2. 并把入口改成我们的lib/index.js。
3. 最后把"type":"module"去掉。

然后npm导入自己命名的包

npm i babel-test-xxx
复制代码

使用es6模块开发项目的人，可以在新的项目里package.json中添加"type":"module"来使用它。

import {add} from 'babel-test-xxx'

console.log(add(1, 2)) // 3
复制代码

使用commonjs模块开发项目的人，可以直接require导入使用

const {add} = require('babel-test-xxx')

console.log(add(1, 2)) // 3
复制代码

尾言

如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~