以下以引用weui的npm包为例

参考 https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

1.新建小程序选ts模板

不是很推荐用ts开发小程序了。

旧项目改了project.config.json支持ts

{
  "setting": {
    "useCompilerPlugins": [
      "typescript"
    ]
  }
}

结果打包的时候，并不会排除掉未依赖的文件。导致最后的包过大。微信开发工具还是有点弱。

目录结构如下：

|-- miniprogram // 小程序目录
	|-- pages // 页面目录,一个页面一个目录
		|-- index
			|-- index.json // 页面配置
			|-- index.ts  // 页面脚本
			|-- index.wxml // 页面结构
			|-- index.wxss // 样式
	|-- utils // 工具类目录
	|-- app.json // 程序配置
	|-- app.ts // 程序逻辑
	|-- app.wxss // 全局样式
	|-- sitemap.json // 站点地图
|-- node_modules // npm依赖目录，新建后没执行npm install 是没有的
|-- typings // 小程序typescript的定义目录
|-- .eslintrc.js // 代码风格规范配置
|-- package.json // npm配置文件
|-- project.config.json // 项目配置文件
|-- tsconfig.json ts // ts配置文件

2.添加依赖

只有miniprogram目录下的才能编译打包。所以需要在miniprogram目录下创建package.json

# 切换到miniprogram目录
cd miniprogram
# 在miniprogram目录下初始化package.json
npm init
# 引用weui
yarn add weui-miniprogram

3.构建npm

微信开发工具->工具->构建npm

构建成功后会在miniprogram目录下生成miniprogram_npm目录，如下

|-- miniprogram // 小程序目录
	|-- miniprogram_npm //小程序可以引用的包
	|-- node_modules 
	|-- package.json

原理本质就是将第三方依赖根目录下的miniprogram_dist文件夹内的文件拷贝到miniprogram_npm中。 依托这个原理我们可以开发第三方自定义组件，而且无需通过官方的模板项目。

4.添加引入

最后在app.wxss中添加引用

@import "./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss";

5.总结

小程序npm引入限制很多，基本也就自己写的包有miniprogram_dist的情况可以很好的引入。

其他前端常用包，要不npm构建失败，要不构建后报未定义。而且即使成功，也是未压缩的包，导致小程序打的包过大。

建议将常用包dist文件夹下的压缩后的js放到你自定义的组件中，自己发布管理，可能会好一些。