导出原生

通过导出原生能力，你可以将一个mpx项目融回到原生项目中。有两种做法：一是局部导出部分页面/组件，二是完整导出一个mpx项目。

导出部分页面/组件

使用mpx开发的页面/组件也可以局部导出为纯粹的普通的原生小程序页面/组件，整合到已有的原生小程序中。

仅需修改webpack config中entry一项，将app改为对应的页面/组件即可。

请参考下面的例子，注意resolve时候最后的query不可以省略，一定要按正确的类型声明这是一个组件or页面。

例子：

  1. // 
  2. module.exports = merge(baseWebpackConfig, {
  3.   name: 'main-compile',
  4.   // entry point of our application
  5.   entry: {
  6.     // 此处以mpx脚手架生成的项目为例
  8.     // before
  9.     // app: resolveSrc('app.mpx')
  11.     // after
  12.     'pages/dindex': resolveSrc('./pages/index.mpx?page'),
  13.     'components/dlist': resolveSrc('./components/list.mpx?component')
  14.   }
  15. })

拷贝dist里所有文件到原生微信小程序项目根目录即可正常工作。

完整导出

我们也可以使用mpx完成一整个项目的开发，这个项目可能包含多个页面，这些页面将合作完成某一项完整的功能，一般可能是公共需求，比如登录/用户中心等公共模块。

如果接入方也是Mpx框架开发的项目，那么皆大欢喜，会非常easy。但若对方是原生开发的，这时我们就希望能将整个项目完整导出成原生，并让接入方顺利使用。

其实观察下mpx项目的打包结构，结构是非常简单的，页面/组件都很规矩地放在对应文件夹里的，所以删掉app.json/app.js/app.wxss/project.config.json几个文件后直接整个拷贝即可。

所以完整导出整个项目的做法可以是这样：

  1. 确认页面路径不要冲突，一般这种公共模块项目，路径上就不要占据/pages/index/index，页面路径Mpx是不会修改的，所以定一个/pages/{模块名}/{页面名}就好。

  2. app.*的内容都要删掉的，所以全局样式都应该写在独立的文件中（wxss），全局配置有什么特殊的要告知接入方（json），因为App.js会被舍弃，所以入口js要抽出来(js)。

  3. 如果有要导出的入口文件，需要给output增加配置：

    1. // webpack.conf
    2. module.exports = {
    3. entry: {
    4.  app: resolveSrc('app.mpx'),
    5.  index: resolveSrc('index.js') // 导出的入口文件，若没有可不写
    6. },
    7. output: {
    8.  libraryTarget: 'commonjs2',
    9.  libraryExport: 'default' // 若export default导出需要写这个,module.exports可省略
    10. },
    11. // ... 略
    12. }

  4. 整个复制进接入方的项目里，注册对应的页面，然后就可以正常使用了！