小程序(ts)使用npm包

xiaoQinVar
本文介绍了小程序(ts)使用npm包相关内容,对大家解决问题具有一定的参考价值,需要的朋友们一起学习吧!

小程序(ts)使用npm包

  • 微信小程序开发使用ts编译的基本目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3QKBsavG-1632220962236)(/小程序(ts)]使用npm包1.png)

  • 使用网上的将project.config.json文件配置,然后将node_modules整个编译的将会很臃肿, 且每次编译速度会非常非常慢。
{
  ...
  "setting": {
    ... 
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ],
  },
  ... 
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZluHqeOG-1632220962239)(/小程序(ts)]使用npm包2.png)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0kBVWC33-1632220962240)(/小程序(ts)]使用npm包3.png)

  • 方法一:使用上诉方法编译后生成miniprogram_npm的包,然后删除你不需要的依赖。这里我以正在捣鼓的cos-wx-sdk为主。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dE7dHoTq-1632220962243)(/小程序(ts)]使用npm包4.png)

    var COS = require('cos-wx-sdk-v5');
    App<IAppOption>({
      globalData: {
      },
      onLaunch() {
        console.log(COS);
      },
    })
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZBsKhXq-1632220962245)(/小程序(ts)]使用npm包5.png)

  • 方法二:

project.config.js值设置npm_dist目录

{
  ...
  "setting": {
    ... 
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ],
  },
  ... 
}

手动创建minoprogram_npm目录,创建xxx文件放入xxx的核心js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6GYnmbJw-1632220962248)(/小程序(ts)]使用npm包4.png)

var COS = require('cos-wx-sdk-v5');
App<IAppOption>({
  globalData: {
  },
  onLaunch() {
    console.log(COS, 3);
  },
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXHFfoQ9-1632220962250)(/小程序(ts)]使用npm包6.png)

该文章版权属于xiaoQinVar
摘录自:https://blog.csdn.net/qq_45593068/article/details/120404218

这篇关于小程序(ts)使用npm包的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!