如何通过 npm 安装使用 mp-loading

[KuangPF]

小程序已支持npm，但对包也有一定的约束，具体如下：

• 只支持纯 js 包，不支持自定义组件
• 必须有入口文件，即需要保证 package.json 中的 main 字段是指向一个正确的入口，如果 package.json 中没有 main 字段，则以 npm 包根目录下的 index.js 作为入口文件
• 测试、构建相关的依赖请放入 devDependencies 字段中避免被一起打包到小程序包中，这一点和小程序 npm 包的要求相同。
• 不支持依赖 c++ addon，不支持依赖 nodejs 的内置库

那么 mp-loading 作为自定义组件，如果通过 npm 安装呢。其实这里通过 npm 安装 mp-loading 的目的只是下载其组件代码，和手动将 dist/ 目录拷贝到项目中组件文件夹下面的性质一样。但由于mp-loading 不是纯 js 文件，因此不能像使用纯 js 包的方式引入，比如下面的写法是会报错：

const mpLoading = require('mp-loading')

具体使用方法如下：

• 安装 mp-loading npm 包

# npm
npm i mp-loading -S --production

# yarn
yarn add mp-loading --production

• npm 构建，参考 npm 支持 中的 使用 npm 包部分

• 构建完成后，以下面的目录结构为例：
  

pages/index/index.json

{
  "usingComponents": {
    "mp-loading":"/miniprogram_npm/mp-loading/index"
  }
}

pages/index/index.wxml

<view class="container">
  <mp-loading></mp-loading>
</view>

到这里，就可以在页面上使用 mp-loading 组件了，当然你也可以在根目录下 app.json 中注册 mp-loading 组件，这样就可以在整个项目页面中使用该组件了。