美文网首页
微信小程序与npm笔记

微信小程序与npm笔记

作者: num_one | 来源:发表于2019-06-10 21:50 被阅读0次

    首先官网上的文档--太**坑了。

    记录一下正确方式:

    1.使用命令行cd /小程序根目录(含有云开发时,一定与pages同级目录)

    10:zhang$ cd /Users/zhang/Desktop/weixin/movie 
    
    10:movie zhang$ ls (展示所有子文件)
    app.js  app.json  “pages”(cd到pages同级目录)  utils  app.wxss  project.config.json 
     sitemap.json
    

    2.此步骤官网上没有(是个坑)

    10:movie zhang$ npm init  (创建npm配置文件)
    

    做完这一步,根目录会多出一个文件package.json。如果没有这个文件,在构建npm时会报错:没有找到可以构建的NPM包。

    解决方案:npm init

    3.npm下载包

    10:movie zhang$ npm i *** -S --production
    

    此时根目录会多出node_modules文件夹。里面就是下载的第三方类库了。

    4.最后构建npm

    构建npm 开始构建 构建完成 构建后的第三方代码

    5.原理介绍(可以看官网上的文档

    为了帮助大家更好的理解发布 npm 包中提到的各种要求,这里简单介绍一下原理:

    1. 首先 node_modules 目录不会参与编译、上传和打包中,所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程,在最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 npm 包。
    2. 构建打包分为两种:小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中;其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程(类似 webpack)。
    3. 寻找 npm 包的过程和 npm 的实现类似,从依赖 npm 包的文件所在目录开始逐层往外找,直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况,构建之前的结构:
    |--node_modules
    |    |--testComp // 小程序 npm 包
    |    |    |--package.json
    |    |    |--src
    |    |    |--miniprogram_dist
    |    |         |-index.js
    |    |         |-index.json
    |    |         |-index.wxss
    |    |         |-index.wxml
    |    |--testa // 其他 npm 包
    |         |--package.json
    |         |--lib
    |         |    |--entry.js
    |         |--node_modules
    |              |--testb
    |                   |--package.json
    |                   |--main.js
    |--pages
    |--app.js
    |--app.wxss
    |--app.json
    |--project.config.js
    
    

    构建之后的结构:

    |--node_modules
    |--miniprogram_npm
    |    |--testComp // 小程序 npm 包
    |    |    |-index.js
    |    |    |-index.json
    |    |    |-index.wxss
    |    |    |-index.wxml
    |    |--testa // 其他 npm 包
    |         |--index.js // 打包后的文件
    |         |--miniprogram_npm
    |              |--testb
    |                   |--index.js // 打包后的文件
    |                   |--index.js.map
    |--pages
    |--app.js
    |--app.wxss
    |--app.json
    |--project.config.js
    
    

    PS:打包生成的代码在同级目录下会生成 source map 文件,方便进行逆向调试。

    相关文章

      网友评论

          本文标题:微信小程序与npm笔记

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