引入库时模块的导入方法（import与reqiure）

在项目中经常要调用库来完成一些需求，选择导入方式不同，根据需求不同，有的时候可能会报错。本文先谈谈import与reqiure这两种导入方式有何区别；然后从我开发时遇到的报错，分析import各方法导入模块时有何区别。

import和 reqiure两种导入方式

这两者是两种不同的模块导入方式，用于在js中引入外部的模块或库。笔者总结有如下区别：

1. 语法差异：

• import是ES6模块的语法，使用import关键字导入模块。是一种静态导入，指在代码执行之前进行解析。
• reqiure是CommonJS模块的语法，使用reqiure函数导入模块。是一种动态导入，意味着导入语句将会在代码执行时进行解析。

2. 功能差异

• import支持按需导入、默认导入、命名导入。可以导入模块的特定部分
• reqiure只能导入整个模块，并赋值给一个变量。如果只需要模块中的一部分，则需要使用模块的属性和方法来访问他们。

const jwt = reqiure('jsonwebtoken') //导入整个jsonwebtoken模块赋值给jwt
const token = jwt.sign(payload,privateKey,{algorithm:'RS256'})//使用jwt模块中的sign方法，进行token的生成

3. 环境差异

• import是ES6模块标准语法，支持浏览器环境运行
• reqiure在node.js环境中运行，在浏览器中需要使用Browserify库进行转换

import按需导入与默认导入

1. 按需导入

import { ref, onMounted } from 'vue'

这种方式使用解构赋值语法，从vue模块中只导入了ref，onMounted两个函数

3. 默认导入
   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>

最后给出浏览器的运行结果