原生自定义组件支持

有些时候，我们需要在mpx工程中使用原生小程序组件:

• 通过npm引用安装第三包
• 将第三方包源码拷贝到本地src目录下

注：mpx并不限制第三方包的格式。开发者可以自己参考小程序官方的开发第三方自定义组件

原理

根据unsingComponents中设定的路径，mpx会去查找包的入口js文件。然后提取入口文件所在的目录中的js json wxss wxml进行编译

编译带来的好处是，常规的拷贝操作，会造成组件内部的依赖缺失，以及冗余代码被打包。而执行了编译，使得mpx可以精确的收集依赖，这表现在：

• js文件中的依赖也会被打包，没有被加载的依赖库不会打包，减小体积
• json文件的usingComponents会被解析，因此原生组件内部可以再引用其他原生组件，甚至是mpx组件
• wxss中引用外部样式
• wxml中的图片资源会被打包

例如使用第三方组件库时，很多组件可能并未使用，如果按照组件库官方给出的使用方式，其实会将整个组件库放进你的项目。
而采用mpx这种方式则只会引入你使用了的组件，所以如果你喜欢vant的按钮，iview的输入框，ColorUI的布局，欢迎尝试mpx。
（本段内容具有时效性，未来微信可能会有优化，毕竟一开始微信连npm都不支持）

例子

文件目录

  node_modules
  |-- npm-a-wx-component // npm安装
  |   --package.json
  |   --src
  |     --index.js
  |     --index.json
  |     --index.wxss
  |     --index.wxml
  |-- npm-b-wx-component // npm安装
  |   --package.json
  |   --src
  |     --index.js
  |     --index.json
  |     --index.wxss
  |     --index.wxml
  component
  │-- container.mpx 
  │-- com-a.mpx 
  |-- src-wx-component // 手动拷贝
  |  --index.js
  |  --index.json
  |  --index.wxss
  |  --index.wxml

container.mpx

<template>
  <view>
    <!-- mpx组件 -->
    <com-a></com-a>
    <!-- npm安装的原生组件 -->
    <npm-a-wx-component></npm-a-wx-component>
    <!-- 手动拷贝到工程的原生组件 -->
    <src-wx-component></src-wx-component>
  </view>
</template>
<script type="application/json">
  "usingComponents": {
    "com-a": "./com-a",
    "npm-a-wx-component": "npm-a-wx-component",
    "src-wx-component": "./src-wx-component"
  }
</script>

node_modules/npm-a-wx-component/src/index.wxml

<template>
  <view>
    <view>this is a native component</view>
    <!-- 原生组件内部使用原生组件 -->
    <npm-b-wx-component></npm-b-wx-component>
  </view>
</template>

node_modules/npm-a-wx-component/src/index.json

{
  "usingComponents": {
    "npm-b-wx-component": "npm-b-wx-component"
  }
}