本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
有些人平时编写模块时比较喜欢使用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包前添加需要的新依赖。
上传之前
- 先在
package.json
中把name
改一个不会重复的名字。 - 并把入口改成我们的
lib/index.js
。 - 最后把
"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
复制代码
尾言
如果觉得文章还不错的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~