ESLint和Jest中使用esm示例詳解
package.json 配置 type 選項(xiàng)
node.js 已經(jīng)支持了 esm 的模式，寫 esm 需求開始大于 commonjs 的需求。但問題一些庫對 esm 支持相對較慢。下面盤點(diǎn)：eslint 和 jest 中使用 esm 遇到的問題。
{
"name": "debugger-source-code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {}
}
告訴這個(gè)項(xiàng)目使用 esm 的方式來處理。
eslint 支持 esm 配置
eslint 支持 esm 有兩種方式：
- 環(huán)境變量使用瀏覽器環(huán)境，支持高階的 ECMAScript 的語法。
- 使用處在實(shí)驗(yàn)性的 eslint.config.js 文件輸出 esm 配置文件。
npm init @eslint/config # 使用命令初始化 eslint 的配置
eslint 命令使用問答的方式生成一個(gè)配置文件。我們選擇的時(shí)候按照瀏覽器 esm 的選項(xiàng)進(jìn)行選擇，得到的一個(gè) .eslintrc.cjs：
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": "eslint:recommended",
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
}
}
注意 后綴時(shí) .cjs 的內(nèi)容, 輸出的是一個(gè) commonjs 的模塊的配置文件，在現(xiàn)有的版本中是不支持的 esm 的配置文件，如果配置文件被編輯器報(bào)了非 esm 錯(cuò)誤，可以將配置文件添加到 .eslintignore 文件中，或者使用其他類型文件配置項(xiàng)目。
使用 eslint.config.js
eslint 在新的版本中，實(shí)驗(yàn)性開始支持 eslint.config.js 文件，此文件需要輸出一個(gè) esm 的模塊，這里不講配， 一個(gè)簡單的配置如下：
export default [
{
rules: {
semi: "error",
"prefer-const": "error"
}
}
]
jest 中使用 esm
當(dāng)然這里不考慮擴(kuò)展 js 語法到 JSX/TSX 等其他拓展文件，原生使用 esm 的語法
npm install jest
如果只是普通的 JS esm 語法其實(shí)不用配置 Jest， 但是需要啟動 Jest 的時(shí)候添加 Node.js 的屬性支持
"scripts": {
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
}
使用 jsx 語法 esm 支持
這里我們還是使用 babel, 使用 babel 的流程如下：
- 安裝 babel 以及其它依賴包：
babel-jest、@bable/core、@babel/preset-env、@babel/preset-react - 配置 babel 配置配置文件；
module.exports = {
presets: [['@babel/preset-env', {targets: {node: 'current'}}]， '@babel/preset-react'],
};
修改 jest 的轉(zhuǎn)換器：
export default {
transform: {
'\\.[jt]s?$': 'babel-jest' // babel-jest 來轉(zhuǎn)換
},
};
小結(jié)
- eslint 支持 esm 中遇到的問題以及解決方法
- jest 中使用 esm 的兩種方式
參考
以上就是ESLint和Jest中使用esm示例詳解的詳細(xì)內(nèi)容，更多關(guān)于ESLint Jest使用esm的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用watch在微信小程序中實(shí)現(xiàn)全局狀態(tài)共享
這篇文章主要給大家介紹了關(guān)于如何使用watch在小程序中實(shí)現(xiàn)全局狀態(tài)共享的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
前幾天一個(gè)項(xiàng)目讓我頭疼了很久，一個(gè)關(guān)于圖片加載時(shí)的loading效果，因?yàn)椴皇翘甹s，所以在網(wǎng)上各種找資料，但還是不理想，無賴苦心研究，終于有了一點(diǎn)眉目了，雖然個(gè)中還有一些道理不懂，至少目的達(dá)到了2013-11-11
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
本篇文章給大家介紹了如何用JS操作剪貼板的功能，并把實(shí)例代碼做了分享，需要的朋友學(xué)習(xí)下吧。2018-02-02
JS實(shí)現(xiàn)定時(shí)自動關(guān)閉DIV層提示框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)定時(shí)自動關(guān)閉DIV層提示框的方法,可實(shí)現(xiàn)加載時(shí)載入js代碼控制div層提示框自動關(guān)閉的效果,非常簡單實(shí)用,需要的朋友可以參考下2015-05-05
eval函數(shù)會將 obj 當(dāng)做代碼去執(zhí)行一遍，下面舉個(gè)例子為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
Javascript刷新頁面實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
淺談javascript六種數(shù)據(jù)類型以及特殊注意點(diǎn)
這篇文章主要介紹了javascript六種數(shù)據(jù)類型以及特殊注意點(diǎn)，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了微信小程序模板消息推送的兩種實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
掌握J(rèn)avaScript中的DOM操作可通過id、class、標(biāo)簽名及CSS選擇器進(jìn)行元素選擇和內(nèi)容修改,Timer定時(shí)器功能包括設(shè)置延時(shí)和間隔執(zhí)行,詳細(xì)介紹了事件處理器和事件監(jiān)聽函數(shù)的使用,以及避免事件覆蓋的建議2024-10-10