add mpx demo

Author: pdap

mpx/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

mpx/.eslintrc.js

@@ -0,0 +1,41 @@
+const { userConf } = require('./config/index')
+
+const eslintConf = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  extends: 'standard',
+  settings: {
+    'html/html-extensions': ['.html', '.mpx'],  // consider .html and .mpx files as HTML
+  },
+  plugins: [
+    'html'
+  ],
+  globals: {
+    wx: true,
+    getApp: true,
+    App: true,
+    __mpx_mode__: true
+  },
+  rules: {
+    camelcase: ['error', { 'allow': ['__mpx_mode__'] }]
+  }
+}
+if (userConf.tsSupport) {
+  eslintConf.overrides = [
+    {
+      files: ['**/*.ts'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'standard',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      plugins: ['@typescript-eslint'],
+    },
+  ]
+}
+
+module.exports = eslintConf

mpx/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules/
+npm-debug.log
+.idea/
+deploy/
+output/
+dist/
+.vscode/

mpx/README.md

@@ -0,0 +1,41 @@
+# mpx
+
+> A mpx project
+
+## Dev
+
+```bash
+# install dep
+npm i
+
+# for dev
+npm run watch
+
+# for online
+npm run build
+```
+
+npm script规范 [build|watch]:[dev|prod]:[cross|web|none]
+
+build默认prod，watch默认dev。另单独提供了build:dev和watch:prod，用于单次构建分析看未压缩代码分析问题和持续压缩代码便于大体积项目真机调试。
+
+建议自行调整cross的目标。npm-run-all是为了兼容windows下无法同时执行两个npm script，若不需要转web平台，可考虑去掉。
+
+# 关键集成步骤
+
+```js
+  import uma from 'umtrack-wx'
+  uma.init({
+    appKey: '5dfa09d2c1d04b48c99109a6',
+    useOpenid: false,
+    autoGetOpenid: false,
+    uploadUserInfo: false,
+    debug: true
+  });
+  import mpx, { createApp } from '@mpxjs/core'
+  import apiProxy from '@mpxjs/api-proxy'
+  mpx.use(apiProxy, { usePromise: true })
+  createApp({
+    onLaunch () {}
+  },{customCtor: App});// 特别注意此处，跟微信官方的kbone类似，都是框架代码编译后优先级高于业务代码，导致无法在最开始引入sdk,无法先于框架劫持生命周期方法。需要编写特殊的webpack插件,提高友盟sdk的执行优先级。虽然mpx提供了，允许其他框架修改劫持的参数  customCtor https://mpxjs.cn/api/global-api.html#createpage  ，看文档需要每个Page，Component，App实例都要注入一次，但实际用来只需要App注入该参数就能正常运行，需要进一步测试，尤其是component，避免未知问题。
+```

mpx/babel.config.json

@@ -0,0 +1,32 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": false,
+        "shippedProposals": true
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/transform-runtime",
+      {
+        "corejs": 3,
+        "version": "^7.10.4"
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "shippedProposals": true
+          }
+        ]
+      ]
+    }
+  }
+}

mpx/build/build.js

@@ -0,0 +1,114 @@
+const ora = require('ora')
+const rm = require('rimraf')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const program = require('commander')
+const { userConf, supportedModes } = require('../config/index')
+const getWebpackConf = require('./getWebpackConf')
+const { resolveDist } = require('./utils')
+
+program
+  .option('-w, --watch', 'watch mode')
+  .option('-p, --production', 'production release')
+  .parse(process.argv)
+
+// 提供npm argv找到期望构建的平台，必须在上面支持的平台列表里
+const npmConfigArgvOriginal = (process.env.npm_config_argv && JSON.parse(process.env.npm_config_argv).original) || []
+const modeArr = npmConfigArgvOriginal.filter(item => typeof item === 'string').map(item => item.replace('--', '')).filter(item => supportedModes.includes(item))
+
+// 暂时兼容npm7的写法
+if (!npmConfigArgvOriginal.length) {
+  const env = process.env
+  supportedCrossMode.forEach(key => {
+    if (env[`npm_config_${key}`] === 'true') {
+      modeArr.push(key)
+    }
+  })
+}
+
+if (!modeArr.length) modeArr.push(userConf.srcMode)
+
+let webpackConfs = []
+
+modeArr.forEach((mode) => {
+  const options = Object.assign({}, userConf, {
+    mode,
+    production: program.production,
+    watch: program.watch,
+    report: process.env.npm_config_report,
+    subDir: (userConf.isPlugin || userConf.cloudFunc) ? 'miniprogram' : ''
+  })
+  webpackConfs.push(getWebpackConf(options))
+})
+
+if (userConf.isPlugin) {
+  const options = Object.assign({}, userConf, {
+    plugin: true,
+    mode: 'wx',
+    production: program.production,
+    watch: program.watch,
+    report: process.env.npm_config_report,
+    subDir: 'plugin'
+  })
+  webpackConfs.push(getWebpackConf(options))
+}
+
+if (webpackConfs.length === 1) {
+  webpackConfs = webpackConfs[0]
+}
+
+const spinner = ora('building...')
+spinner.start()
+
+try {
+  modeArr.forEach(item => {
+    rm.sync(resolveDist(item, '*'))
+  })
+} catch (e) {
+  console.error(e)
+  console.log('\n\n删除dist文件夹遇到了一些问题，如果遇到问题请手工删除dist重来\n\n')
+}
+
+if (program.watch) {
+  webpack(webpackConfs).watch(undefined, callback)
+} else {
+  webpack(webpackConfs, callback)
+}
+
+function callback (err, stats) {
+  spinner.stop()
+  if (err) {
+    process.exitCode = 1
+    return console.error(err)
+  }
+  if (Array.isArray(stats.stats)) {
+    stats.stats.forEach(item => {
+      console.log(item.compilation.name + '打包结果：')
+      process.stdout.write(item.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false,
+        entrypoints: false
+      }) + '\n\n')
+    })
+  } else {
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false,
+      entrypoints: false
+    }) + '\n\n')
+  }
+
+  if (stats.hasErrors()) {
+    console.log(chalk.red('  Build failed with errors.\n'))
+  } else if (program.watch) {
+    console.log(chalk.cyan(`  Build complete at ${new Date()}.\n  Still watching...\n`))
+  } else {
+    console.log(chalk.cyan('  Build complete.\n'))
+  }
+}

mpx/build/getPlugins.js

@@ -0,0 +1,94 @@
+let { mpxPluginConf, dllConf, supportedModes } = require('../config/index')
+const MpxWebpackPlugin = require('@mpxjs/webpack-plugin')
+const { resolve, resolveSrc } = require('./utils')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin
+const webpack = require('webpack')
+const path = require('path')
+
+module.exports = function getRules (options) {
+  const { mode, srcMode, subDir, production, report } = options
+  const plugins = []
+  const copyIgnoreArr = supportedModes.map((item) => {
+    return `**/${item}/**`
+  })
+
+  let currentMpxPluginConf
+  if (typeof mpxPluginConf === 'function') {
+    currentMpxPluginConf = mpxPluginConf(options)
+  } else {
+    currentMpxPluginConf = mpxPluginConf
+  }
+
+  plugins.push(new MpxWebpackPlugin(Object.assign({}, currentMpxPluginConf, {
+    mode,
+    srcMode
+  })))
+  const copyList = [
+    {
+      context: resolve(`static/${mode}`),
+      from: '**/*',
+      to: subDir ? '..' : ''
+    },
+    {
+      context: resolve(`static`),
+      from: '**/*',
+      to: subDir ? '..' : '',
+      globOptions: {
+        ignore: copyIgnoreArr
+      }
+    }
+  ]
+
+  if (options.cloudFunc) {
+    copyList.push({
+      context: resolve(`src/functions`),
+      from: '**/*',
+      to: '../functions/'
+    })
+  }
+
+  if (options.needDll) {
+    const getDllManifests = require('./getDllManifests')
+    const dllManifests = getDllManifests(production)
+    const localDllManifests = dllManifests.filter((manifest) => {
+      return manifest.mode === mode || !manifest.mode
+    })
+
+    localDllManifests.forEach((manifest) => {
+      plugins.push(new webpack.DllReferencePlugin({
+        context: dllConf.context,
+        manifest: manifest.content
+      }))
+      copyList.push({
+        context: path.join(dllConf.path, 'lib'),
+        from: manifest.content.name,
+        to: manifest.content.name
+      })
+    })
+  }
+  plugins.push(new CopyWebpackPlugin(copyList))
+
+  plugins.push(new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: production ? '"production"' : '"development"'
+    }
+  }))
+
+  if (mode === 'web') {
+    plugins.push(new VueLoaderPlugin())
+    plugins.push(new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: resolveSrc('index.html', subDir),
+      inject: true
+    }))
+  }
+
+  if (report) {
+    plugins.push(new BundleAnalyzerPlugin())
+  }
+
+  return plugins
+}