目录

• 前言
• 第一种方案

• ES6模块

• 创建项目
• 开启ES6模块
• 测试

• 兼容性处理

• babel

• 第二种方案

• 使用TypeScript
• esbuild

• 尾言

前言

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

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

本文介绍es6模块如何开启使用，并介绍如何使用babel、esbuild对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

兼容性处理

首先我们清楚一点，就是编辑器允许你使用esm导入commonjs的，但是commonjs不能导入esm，也就意味着，我们在上传自己的npm包时，也就意味着我们需要将我们的es6项目转化为cjs项目。

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下所有文件转化为cjs代码，至于打包位置可以自定义，以下代码将打包至lib文件夹中。

npx babel src --out-dir lib

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

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

上传之前

先在package.json中把name改一个不会重复的名字。

并把入口改成我们的lib/index.js。

最后把"type":"module"去掉，我们只是暂时使用es6模块，在上传之后你的模块理应是cjs。

然后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

第二种方案

使用TypeScript

编写代码，全部使用ts文件编写，ts自动支持es模块的导入导出语法。

问题就是ts文件是不能直接运行的，于是我们需要编写完将它转化为js。

esbuild

使用esbuild不仅可以将 ts 转化为 js，还可以将 ES6 代码转为 CJS 兼容。

$ npm i esbuild -D

在 package.json 添加 build 命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "esbuild src/index.ts --bundle --outdir=lib --platform=node"
  },

运行打包，编译出来的 lib/index.js 就可以直接使用了

$ npm run build

将 package.json 的入口 main 改为我们编译后的文件。

"main": "lib/index.js",

然后就可以上传npm包了。

尾言

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