From 90f4cc027ad12defd0a95c2eab46f88d8e01e318 Mon Sep 17 00:00:00 2001 From: Orange-C Date: Mon, 5 Aug 2019 21:35:59 +0800 Subject: [PATCH 1/4] fix: add weex external --- packages/rax-plugin-app/src/config/getWebpackBase.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/rax-plugin-app/src/config/getWebpackBase.js b/packages/rax-plugin-app/src/config/getWebpackBase.js index 1c433ab549..17f7fa9b36 100644 --- a/packages/rax-plugin-app/src/config/getWebpackBase.js +++ b/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') From 937e0ff7315cf8f4a297b15d09f28b7edb4ec9a5 Mon Sep 17 00:00:00 2001 From: Orange-C Date: Tue, 6 Aug 2019 11:14:30 +0800 Subject: [PATCH 2/4] feat: add mp --- packages/rax-plugin-app/package.json | 2 + packages/rax-plugin-app/src/build.js | 86 ++++++++++++++++ .../src/config/miniapp/build.js | 25 +++++ .../rax-plugin-app/src/config/miniapp/dev.js | 23 +++++ .../src/config/miniapp/getOutputPath.js | 9 ++ packages/rax-plugin-app/src/dev.js | 97 +++++++++++++++++++ packages/rax-plugin-app/src/index.js | 41 +++----- 7 files changed, 254 insertions(+), 29 deletions(-) create mode 100644 packages/rax-plugin-app/src/build.js create mode 100644 packages/rax-plugin-app/src/config/miniapp/build.js create mode 100644 packages/rax-plugin-app/src/config/miniapp/dev.js create mode 100644 packages/rax-plugin-app/src/config/miniapp/getOutputPath.js create mode 100644 packages/rax-plugin-app/src/dev.js diff --git a/packages/rax-plugin-app/package.json b/packages/rax-plugin-app/package.json index 85788bc774..cd1c5e9013 100644 --- a/packages/rax-plugin-app/package.json +++ b/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", diff --git a/packages/rax-plugin-app/src/build.js b/packages/rax-plugin-app/src/build.js new file mode 100644 index 0000000000..730c658ec2 --- /dev/null +++ b/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(); + } + }); +}; diff --git a/packages/rax-plugin-app/src/config/miniapp/build.js b/packages/rax-plugin-app/src/config/miniapp/build.js new file mode 100644 index 0000000000..35ecc14dd4 --- /dev/null +++ b/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, + }); + } + }); + }); +}; diff --git a/packages/rax-plugin-app/src/config/miniapp/dev.js b/packages/rax-plugin-app/src/config/miniapp/dev.js new file mode 100644 index 0000000000..fae1e247e1 --- /dev/null +++ b/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, + }); + } + }); +}; diff --git a/packages/rax-plugin-app/src/config/miniapp/getOutputPath.js b/packages/rax-plugin-app/src/config/miniapp/getOutputPath.js new file mode 100644 index 0000000000..6d81998ead --- /dev/null +++ b/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; +}; diff --git a/packages/rax-plugin-app/src/dev.js b/packages/rax-plugin-app/src/dev.js new file mode 100644 index 0000000000..db18d40a73 --- /dev/null +++ b/packages/rax-plugin-app/src/dev.js @@ -0,0 +1,97 @@ +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 normalInfo = null; + + let emitDevLog = false; + + 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(); + } + } + + if (targets.length === 1 && targets[0] === 'miniapp') { + const mpDev = require('./config/miniapp/dev'); + onHook('after.dev', 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 }) => { + 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 + }); + }); + } +}; + diff --git a/packages/rax-plugin-app/src/index.js b/packages/rax-plugin-app/src/index.js index e96d06eb0c..91c4bc2fc7 100644 --- a/packages/rax-plugin-app/src/index.js +++ b/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(context.userConfig, defaultUserConfig); - 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); + } }; From 63e954ea4df18dc4d5a2ce5fe7903b10f662a979 Mon Sep 17 00:00:00 2001 From: Orange-C Date: Tue, 6 Aug 2019 11:19:05 +0800 Subject: [PATCH 3/4] feat: update version --- packages/rax-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json index 5d85a96d6e..494393e8a7 100644 --- a/packages/rax-scripts/package.json +++ b/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", From a79c493ea1c333088d732dec5d00ede087922ae5 Mon Sep 17 00:00:00 2001 From: Orange-C Date: Tue, 6 Aug 2019 11:27:02 +0800 Subject: [PATCH 4/4] fix: fix mp dev --- packages/rax-plugin-app/src/dev.js | 32 ++++++++++++++++-------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/rax-plugin-app/src/dev.js b/packages/rax-plugin-app/src/dev.js index db18d40a73..b46837f294 100644 --- a/packages/rax-plugin-app/src/dev.js +++ b/packages/rax-plugin-app/src/dev.js @@ -7,10 +7,6 @@ const getMpOuput = require('./config/miniapp/getOutputPath'); module.exports = ({ chainWebpack, registerConfig, context, onHook }, options = {}) => { const { targets = [] } = options; - let normalInfo = null; - - let emitDevLog = false; - function devCompileLog({ url, err, stats }) { consoleClear(true); @@ -55,9 +51,12 @@ module.exports = ({ chainWebpack, registerConfig, context, onHook }, options = { } } + // run miniapp watch when targets has only miniapp if (targets.length === 1 && targets[0] === 'miniapp') { const mpDev = require('./config/miniapp/dev'); - onHook('after.dev', devCompileLog); + onHook('after.dev', () => { + mpDev(context, devCompileLog); + }); } else { targets.forEach(target => { if (target === 'weex' || target === 'web') { @@ -73,17 +72,20 @@ module.exports = ({ chainWebpack, registerConfig, context, onHook }, options = { }); onHook('after.devCompile', async({ url, err, stats }) => { - const mpBuild = require('./config/miniapp/build'); - let mpBuildErr = null; - const mpInfo = await mpBuild(context); - - if (mpInfo.err || mpInfo.stats.hasErrors()) { - mpBuildErr = mpInfo; - } + // 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; + if (mpBuildErr) { + err = mpBuildErr.err; + stats = mpBuildErr.stats; + } } devCompileLog({