Merge pull request #1208 from alibaba/feat-add-mpapp

Feat add mpApp

packages/rax-plugin-app/package.json

@@ -45,10 +45,12 @@
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.2",
     "commander": "^2.19.0",
+    "console-clear": "^1.1.1",
     "css-loader": "^2.1.1",
     "deepmerge": "^4.0.0",
     "fs-extra": "^8.1.0",
     "image-source-loader": "^0.6.5",
+    "jsx2mp-cli": "^0.1.0-beta.1",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "loader-utils": "^1.1.0",

packages/rax-plugin-app/src/build.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const chalk = require('chalk');
+const consoleClear = require('console-clear');
+
+const getMpOuput = require('./config/miniapp/getOutputPath');
+
+module.exports = ({ chainWebpack, registerConfig, context, onHook }, options = {}) => {
+  const { targets = [] } = options;
+
+  let mpBuildErr = null;
+
+  targets.forEach(target => {
+    if (target === 'weex' || target === 'web') {
+      const getBase = require(`./config/${target}/getBase`);
+      const setBuild = require(`./config/${target}/setBuild`);
+
+      registerConfig(target, getBase(context));
+
+      chainWebpack((config) => {
+        setBuild(config.getConfig(target), context);
+      });
+    }
+
+    if (target === 'miniapp') {
+      const mpBuild = require('./config/miniapp/build');
+      onHook('after.build', async() => {
+        const mpInfo = await mpBuild(context);
+        if (mpInfo.err || mpInfo.stats.hasErrors()) {
+          mpBuildErr = mpInfo;
+        }
+      });
+    }
+  });
+
+  onHook('after.build', ({ err, stats }) => {
+    const { rootDir, userConfig } = context;
+    const { outputDir } = userConfig;
+
+    consoleClear(true);
+
+    if (mpBuildErr) {
+      err = mpBuildErr.err;
+      stats = mpBuildErr.stats;
+    }
+
+    if (err) {
+      console.error(err.stack || err);
+      if (err.details) {
+        console.error(err.details);
+      }
+      return;
+    }
+    if (stats.hasErrors()) {
+      const errors = stats.compilation.errors;
+      for (let e of errors) {
+        console.log(chalk.red(`    ${errors.indexOf(e) + 1}. ${e.error.message} \n`));
+        if (process.env.DEBUG === 'true') {
+          console.log(e.error.stack);
+        }
+      }
+      console.log(chalk.yellow('Set environment `DEBUG=true` to see detail error stacks.'));
+      return;
+    }
+
+    console.log(chalk.green('Rax build finished:'));
+    console.log();
+
+    if (~targets.indexOf('web')) {
+      console.log(chalk.green('[Web] Bundle at:'));
+      console.log('   ', chalk.underline.white(path.resolve(rootDir, outputDir, 'web')));
+      console.log();
+    }
+
+    if (~targets.indexOf('weex')) {
+      console.log(chalk.green('[Weex] Bundle at:'));
+      console.log('   ', chalk.underline.white(path.resolve(rootDir, outputDir, 'weex')));
+      console.log();
+    }
+
+    if (~targets.indexOf('miniapp')) {
+      console.log(chalk.green('[Miniapp] Bundle at:'));
+      console.log('   ', chalk.underline.white(getMpOuput(context)));
+      console.log();
+    }
+  });
+};

packages/rax-plugin-app/src/config/getWebpackBase.js

@@ -20,6 +20,16 @@ module.exports = (context) => {
   config.resolve.extensions
     .merge(['.js', '.json', '.jsx', '.html', '.ts', '.tsx']);
 
+  // external weex module
+  config.externals([
+    function(context, request, callback) {
+      if (request.indexOf('@weex-module') !== -1) {
+        return callback(null, 'commonjs ' + request);
+      }
+      callback();
+    }
+  ]);
+
   config.output
     .path(path.resolve(rootDir, outputDir))
     .filename('[name].js')

packages/rax-plugin-app/src/config/miniapp/build.js

@@ -0,0 +1,25 @@
+const fs = require('fs-extra');
+const jsx2mp = require('jsx2mp-cli');
+
+const getOutputPath = require('./getOutputPath');
+
+module.exports = (context) => {
+  const outputPath = getOutputPath(context);
+  fs.removeSync(outputPath);
+
+  return new Promise((resolve, reject) => {
+    jsx2mp.build({
+      webpackConfig: {
+        output: {
+          path: outputPath
+        }
+      },
+      afterCompiled: (err, stats) => {
+        resolve({
+          err,
+          stats,
+        });
+      }
+    });
+  });
+};

packages/rax-plugin-app/src/config/miniapp/dev.js

@@ -0,0 +1,23 @@
+const fs = require('fs-extra');
+const jsx2mp = require('jsx2mp-cli');
+
+const getOutputPath = require('./getOutputPath');
+
+module.exports = (context, devCompileLog) => {
+  const outputPath = getOutputPath(context);
+  fs.removeSync(outputPath);
+
+  jsx2mp.watch({
+    webpackConfig: {
+      output: {
+        path: outputPath
+      }
+    },
+    afterCompiled: (err, stats) => {
+      devCompileLog({
+        err,
+        stats,
+      });
+    }
+  });
+};

packages/rax-plugin-app/src/config/miniapp/getOutputPath.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = (context) => {
+  const { rootDir, userConfig } = context;
+  const { outputDir } = userConfig;
+  const outputPath = path.resolve(rootDir, 'build-miniapp');
+
+  return outputPath;
+};

packages/rax-plugin-app/src/dev.js

@@ -0,0 +1,99 @@
+const path = require('path');
+const chalk = require('chalk');
+const consoleClear = require('console-clear');
+
+const getMpOuput = require('./config/miniapp/getOutputPath');
+
+module.exports = ({ chainWebpack, registerConfig, context, onHook }, options = {}) => {
+  const { targets = [] } = options;
+
+  function devCompileLog({ url, err, stats }) {
+    consoleClear(true);
+
+    if (err) {
+      console.error(err.stack || err);
+      if (err.details) {
+        console.error(err.details);
+      }
+      return;
+    }
+    if (stats.hasErrors()) {
+      const errors = stats.compilation.errors;
+      for (let e of errors) {
+        console.log(chalk.red(`    ${errors.indexOf(e) + 1}. ${e.error.message} \n`));
+        if (process.env.DEBUG === 'true') {
+          console.log(e.error.stack);
+        }
+      }
+      console.log(chalk.yellow('Set environment `DEBUG=true` to see detail error stacks.'));
+      return;
+    }
+
+    console.log(chalk.green('Rax development server has been started:'));
+    console.log();
+
+    if (~targets.indexOf('web')) {
+      console.log(chalk.green('[Web] Development server at:'));
+      console.log('   ', chalk.underline.white(url));
+      console.log();
+    }
+
+    if (~targets.indexOf('weex')) {
+      console.log(chalk.green('[Weex] Development server at:'));
+      console.log('   ', chalk.underline.white(`${url}/weex/index.js?wh_weex=true`));
+      console.log();
+    }
+
+    if (~targets.indexOf('miniapp')) {
+      console.log(chalk.green('[Miniapp] Watching file changes at:'));
+      console.log('   ', chalk.underline.white(getMpOuput(context)));
+      console.log();
+    }
+  }
+
+  // run miniapp watch when targets has only miniapp
+  if (targets.length === 1 && targets[0] === 'miniapp') {
+    const mpDev = require('./config/miniapp/dev');
+    onHook('after.dev', () => {
+      mpDev(context, devCompileLog);
+    });
+  } else {
+    targets.forEach(target => {
+      if (target === 'weex' || target === 'web') {
+        const getBase = require(`./config/${target}/getBase`);
+        const setDev = require(`./config/${target}/setDev`);
+
+        registerConfig(target, getBase(context));
+
+        chainWebpack((config) => {
+          setDev(config.getConfig(target), context);
+        });
+      }
+    });
+
+    onHook('after.devCompile', async({ url, err, stats }) => {
+      // run miniapp build while targets have web or weex, for log control
+      if (~targets.indexOf('miniapp')) {
+        const mpBuild = require('./config/miniapp/build');
+        let mpBuildErr = null;
+        const mpInfo = await mpBuild(context);
+
+        if (mpInfo.err || mpInfo.stats.hasErrors()) {
+          mpBuildErr = mpInfo;
+        }
+
+        if (mpBuildErr) {
+          err = mpBuildErr.err;
+          stats = mpBuildErr.stats;
+        }
+      }
+
+      devCompileLog({
+        url,
+        err,
+        stats
+      });
+    });
+  }
+};
+

packages/rax-plugin-app/src/index.js

@@ -1,37 +1,20 @@
-const chalk = require('chalk');
 const deepmerge = require('deepmerge');
+
 const defaultUserConfig = require('./config/defaultUserConfig');
+const build = require('./build');
+const dev = require('./dev');
 
-module.exports = ({ chainWebpack, registerConfig, context, onHook }, options = {}) => {
+module.exports = (api, options) => {
+  const { context } = api;
+  const { command } = context;
   // set default config
   context.userConfig = deepmerge(defaultUserConfig, context.userConfig);
 
-  const { targets = [] } = options;
-
-  targets.forEach(target => {
-    if (target === 'weex' || target === 'web') {
-      const getBase = require(`./config/${target}/getBase`);
-      const setDev = require(`./config/${target}/setDev`);
-      const setBuild = require(`./config/${target}/setBuild`);
-
-      registerConfig(target, getBase(context));
-
-      chainWebpack((config, { command }) => {
-        if (command === 'dev') {
-          setDev(config.get(target), context);
-        }
-
-        if (command === 'build') {
-          setBuild(config.get(target), context);
-        }
-      });
+  if (command === 'build') {
+    build(api, options);
+  }
 
-      if (target === 'weex') {
-        onHook('after.dev', ({url}) => {
-          console.log(chalk.green('[Weex] Starting the development server at:'));
-          console.log('   ', chalk.underline.white(`${url}/weex/index.js?wh_weex=true`));
-        });
-      }
-    }
-  });
+  if (command === 'dev') {
+    dev(api, options);
+  }
 };

packages/rax-scripts/package.json

@@ -98,7 +98,7 @@
     "rax-ssr-dev-server": "^1.0.0",
     "rax-webpack-plugin": "^0.6.5",
     "rimraf": "^2.6.2",
-    "scripts-core": "^0.1.0-6",
+    "scripts-core": "^0.1.0",
     "strip-ansi": "^5.0.0",
     "stylesheet-loader": "^0.6.5",
     "ts-loader": "^5.3.3",