目录
前言
有些人平时编写模块时比较喜欢使用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包了。
尾言
如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~
