美文网首页
微信小程序构建npm,添加各种包

微信小程序构建npm,添加各种包

作者: 阿毛呀_ | 来源:发表于2021-07-30 14:57 被阅读0次

    前言

    从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。网上有很多npm的教程,但是感觉对新手不太友好,记录一下作为一个新手我是如何操作的。
    tips:要使用npm需要先安装node.js
    tips:本文以安装WeUI组件库weui-miniprogram为例

    项目中设置勾上npm

    设置勾上npm.jpg

    初始化npm

    命令行
    npm init
    
    直接在新建项目的调试器里面新建终端。输入npm init 命令行。 step1.jpg

    安装WeUI组件库weui-miniprogram

    命令行
    npm i weui-miniprogram -S --production
    
    如果成功应该是直接创建了node_modules文件夹,还有package-lock.json、package.json两个Json文件。 成功.png

    tips:--production可以减少安装一些业务无关的npm包,从而减少整个小程序包的大小。

    安装npm包

    命令行
    npm install
    

    在开发者工具中选择构建npm

    构建npm.jpg

    在miniprogram_npm目录下会有导入的weui-miniprogram

    使用

    在对应的页面.json文件里引入

    {
      "usingComponents": {
        "mp-icon": "weui-miniprogram/icon/icon"
      }
    }
    

    以上都是在一切顺利的情况,下面介绍一下我自己碰到的问题。

    提示:Sorry, name can only contain URL-friendly characters and name can no longer....
    错误提示.jpg
    这个问题是npm在初始化的时候,会询问项目名。如果不命名直接回车它会指向你文件的名称当做项目名。但是有时候,我们的项目名称是不规范的。所以它会询问!这时候需要在询问的时候自己重新定义一个。比如weixinmini pack-name.jpg
    然后一路回车下去,除了开始的package name, 其余的暂时可不填。最后到确认即可 pack-name-确认.jpg

    后面安装使用的就和之前一样了。

    相对而言,支付宝小程序npm添加包就简单多了。如果本文对你有帮助,记得点个赞呢,谢谢!

    相关文章

      网友评论

          本文标题:微信小程序构建npm,添加各种包

          本文链接:https://www.haomeiwen.com/subject/egaqvltx.html