17-引入js三方库

普通项目引入npm包

比如我们是一个普通的html项目，要引入npm下载的包。如何实现

比如 npm i axios ， 进去 /node_modules/axios/ 下查看目录结构和packages.json文件

模块导入

判断是否支持模块导入：

• packages.json文件 有 ："type": "module"
• 目录存在 esm 文件夹，并且有使用

"react-native": {
"default": "./dist/esm/axios.js"
}

完整例子

<script type="module">
    // 正确导入 axios（注意：是 default 导出）
    import axios from './node_modules/axios/dist/esm/axios.js';
    axios({
        url: 'https://my-api.share888.top/my-api/seo/getWebsiteInfo?url=https://blog.share888.top',
    }).then(function (response) {
        // 处理响应数据
        console.log(response.data);
    }).catch(function (error) {
        // 处理错误情况
        console.log(error);
    });
</script>

浏览器直接引入

判断是否支持模块导入：

• jsdelivr 和 unpkg 字段. 这两个字段专门用于 CDN 服务； 它们指向的 dist/axios.min.js 就是 UMD 格式（可在 <script> 中直接使用）；

  "jsdelivr": "dist/axios.min.js",
  "unpkg": "dist/axios.min.js",

完整例子

<script src="./node_modules/axios/dist/axios.min.js"></script>
<script >
    axios({
        url: 'https://my-api.share888.top/my-api/seo/getWebsiteInfo?url=https://blog.share888.top',
    }).then(function (response) {
        // 处理响应数据
        console.log(response.data);
    }).catch(function (error) {
        // 处理错误情况
        console.log(error);
    });
</script>