评论

微信小程序如何引入npm包？

2020-09-30
40403浏览
10评论

通过 npm 使用 dayjs 库

前言

你还在下载源码复制到项目中去使用吗？现在已经不需要了！

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。

接下来我们以npm引用 dayjs 库为案例。

dayjs：一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js。

Moment.js 的 2kB 轻量化方案，拥有同样强大的 API

    dayjs()
   .startOf('month')
   .add(1, 'day')
   .set('year', 2018)
   .format('YYYY-MM-DD HH:mm:ss')
  • 🕒 和 Moment.js 相同的 API 和用法
  • 💪 不可变数据 (Immutable)
  • 🔥 支持链式操作 (Chainable)
  • 🌐 国际化 I18n
  • 📦 仅 2kb 大小的微型库
  • 👫 全浏览器兼容

地址：https://github.com/iamkun/dayjs

引用步骤

  1. 打开调试器区域的【终端】面板。

  1. 输入npm init，然后填写初始化信息，默认值可以按回车。

  2. 填写完成后，会生成一个package.json文件。

  1. 安装 dayjs：在终端输入 npm install dayjs --save

  2. 点击开发者工具中的工具栏：详情 --> 本地设置 --> 勾选【使用 npm 模块】

  1. 点击开发者工具中的菜单栏：工具 --> 构建 npm

  1. 引入使用

dayjs 详细使用文档：https://day.js.org/zh-CN/

最后一次编辑于  2020-09-30  
点赞 8
收藏
评论

10 个评论

  • 天蜂网络
    天蜂网络
    2020-09-30

    1.在小程序根目录内，初始化npm

    2.在小程序中执行命令安装 npm 包

    3.在微信开发者工具中的菜单栏：工具 --> 构建 npm 

    4.在微信开发者工具中的菜单栏：工具 --> 项目详情， 勾选“使用 npm 模块”选项：

    5.使用组件库

    6.使用其他npm 包方法


    2020-09-30
    赞同 2
    回复 3
    • Avenger
      Avenger
      2021-04-17
      到第三步就失败了，提示 没有找到可以构建的NPM包... macOS系统
      2021-04-17
      赞 4
      回复
    • Thunders
      Thunders
      2022-05-29
      我怎么没有项目详情的选项。。
      2022-05-29
      赞
      回复
    • 等闲识得东风面
      等闲识得东风面
      2023-07-31
      请问dayjs的插件怎么构建进去 构建完成只有dsyjs 一个文件
      2023-07-31
      赞
      回复
  • 鑫森淼焱垚
    鑫森淼焱垚
    2022-08-30

    最新版的小程序工具没有勾选使用npm这一项咋整

    2022-08-30
    赞同 1
    回复 2
  • 困死了不想起床
    困死了不想起床
    08-16

    为啥我npm init提示说npm不是命令语句

    08-16
    赞同
    回复
  • videni
    videni
    04-03

    找到解决办法了吗？

    04-03
    赞同
    回复 1
    • 陈宇明
      陈宇明
      04-07
      什么方案？
      04-07
      赞
      回复
  • hboot
    hboot
    2023-06-28
    let dayjs = require('dayjs')
let relativeTime = require('dayjs/plugin/relativeTime.js')
dayjs.extend(relativeTime)


    引入`dayjs`插件报错。路径找不到，寻址找到当前页面下去了变成了`pages/home/dayjs/plugin/relativeTime.js` . 要怎么解决啊，兄弟们

    2023-06-28
    赞同
    回复 3
    • 等闲识得东风面
      等闲识得东风面
      2023-07-31
      找到解决办法了吗同问
      2023-07-31
      赞
      回复
    • 捌 玖
      捌 玖
      2023-12-25
      我也是这个问题，想问下 找到解决方法了吗？
      2023-12-25
      赞
      回复
    • videni
      videni
      04-03
      找到解决办法了吗？
      04-03
      赞
      回复
  • 刘
    刘
    2022-02-10

    小程序使用的npm相关的库，是有要求的吗，我用一些第三方的npm库，都不行呢，是不是只有纯js小工具类的npm才能移植到小程序中使用

    2022-02-10
    赞同
    回复
  • chendong🤔
    chendong🤔
    2021-12-02

    好人啊，一生平安

    2021-12-02
    赞同
    回复
  • 低头思
    低头思
    2021-07-15

    请问dayjs 插件问题如何解决 谢谢？

    2021-07-15
    赞同
    回复
  • 最长的电影
    最长的电影
    2021-03-11

    怎么使用插件啊，这个npm只提供了核心代码，没有安装插件呢，这个要怎么安装 求解？

    2021-03-11
    赞同
    回复 1
    • 薄荷
      薄荷
      2021-04-15
      你好，这个解决了吗
      2021-04-15
      赞
      回复
  • 陈建平
    陈建平
    2021-02-23

    是不是每安装一个包，就要 构建一次

    2021-02-23
    赞同
    回复
请 登录 后发表内容
作者介绍

文章标签
npmdayjs构建