在项目中经常要调用库来完成一些需求,选择导入方式不同,根据需求不同,有的时候可能会报错。本文先谈谈import
与reqiure
这两种导入方式有何区别;然后从我开发时遇到的报错,分析import
各方法导入模块时有何区别。
import
和 reqiure
两种导入方式
这两者是两种不同的模块导入方式,用于在js中引入外部的模块或库。笔者总结有如下区别:
- 语法差异:
import
是ES6模块的语法,使用import
关键字导入模块。是一种静态导入,指在代码执行之前进行解析。reqiure
是CommonJS模块的语法,使用reqiure
函数导入模块。是一种动态导入,意味着导入语句将会在代码执行时进行解析。
- 功能差异
import
支持按需导入、默认导入、命名导入。可以导入模块的特定部分reqiure
只能导入整个模块,并赋值给一个变量。如果只需要模块中的一部分,则需要使用模块的属性和方法来访问他们。
const jwt = reqiure('jsonwebtoken') //导入整个jsonwebtoken模块赋值给jwt
const token = jwt.sign(payload,privateKey,{algorithm:'RS256'})//使用jwt模块中的sign方法,进行token的生成
- 环境差异
import
是ES6模块标准语法,支持浏览器环境运行reqiure
在node.js环境中运行,在浏览器中需要使用Browserify
库进行转换
import
按需导入与默认导入
- 按需导入
import { ref, onMounted } from 'vue'
这种方式使用解构赋值语法,从vue模块中只导入了ref,onMounted两个函数
- 默认导入
import axios from ‘axios’
这种方式直接将整个模块作为默认导出导入。值得注意的是,一个模块只能有一个默认导出,也有可能没有默认导出。该怎么理解这句话呢,下面给出我在项目中遇到的问题:
我是有一个将markdown文本转换为HTML文本进行渲染,这里需要使用一个库marked,是轻量markdown解析器,在引入模块时,我最开始是这么写的。
import marked from 'marked'
不出意外,报错了,控制台打印的消息如下
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/marked.js?v=97ca0470' does not provide an export named 'default' (at App.vue:6:28)
大概意思就是marked库的导入方式不正确,具体原因是marked库在导入时没有默认导出,需要使用按需导入的方法引入,于是更正代码如下:
<template>
<div v-html="htmlText"></div>
</template>
<script setup>
import { marked } from 'marked'
import { ref } from 'vue'
const markdownText = ref('# 标题1\n## 标题2\n这是一个段落。\n\n- 列表项1\n- 列表项2')
const htmlText = marked(markdownText.value)
export default {
setup() {
return {
htmlText
}
}
}
</script>
最后给出浏览器的运行结果