首先官网上的文档--太**坑了。
记录一下正确方式:
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包。
3.npm下载包
10:movie zhang$ npm i *** -S --production
此时根目录会多出node_modules
文件夹。里面就是下载的第三方类库了。
4.最后构建npm
构建npm 开始构建 构建完成 构建后的第三方代码5.原理介绍(可以看官网上的文档)
为了帮助大家更好的理解发布 npm 包中提到的各种要求,这里简单介绍一下原理:
- 首先
node_modules
目录不会参与编译、上传和打包中,所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程,在最外层的node_modules
的同级目录下会生成一个miniprogram_npm
目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 npm 包。 - 构建打包分为两种:小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到
miniprogram_npm
中;其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程(类似 webpack)。 - 寻找 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 文件,方便进行逆向调试。
网友评论