微信小程序与npm笔记

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

记录一下正确方式：

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 文件，方便进行逆向调试。