qmzreact 1.0.1 → 1.0.3

package/README.md

@@ -45,10 +45,10 @@ yarn add --dev qmzreact
 示例配置：
 ```js
 module.exports = {
-    port: 3000,
+    port: 8888,
     publicPath: '/',
     // 构建输出目录
-    buildDir: 'dist',
+    buildDir: 'build',
     alias: {
         // 默认配置
         "@": path.resolve(__dirname, 'src')
@@ -60,12 +60,13 @@ module.exports = {
             pathRewrite: { '^/api': '' }
         }
     }
+    // 监听文件新增或删除 并重启服务，防止因为文件丢失而编译报错，默认只监听components 目录下的文件，如没有这个目录则不监听，  开启后，文件监听会占用大量cpu，请谨慎使用
     watch: ['./src/components'],
     // 是否启用 https服务
     isHttps: false,
     // 是否启用 dll
     dll: false,
-    // 拆包
+    // 拆包，将第三方库单独打包，默认为{}，为默认拆包，可自定义拆包，如：
     commonChunks: {
         "echarts": ["echarts", "zrender"],
     },

package/conf/config/index.js

@@ -29,7 +29,8 @@ module.exports = {
           compression: 'gzip',
           buildDependencies: {
             config: [
-              './build.config.js'
+              './build.config.js',
+              ...processConfig.cacheBuildDependencies
             ]
           }
         },
@@ -44,7 +45,8 @@ module.exports = {
           name: 'local_development',
           buildDependencies: {
             config: [
-              './build.config.js'
+              './build.config.js',
+              ...processConfig.cacheBuildDependencies
             ]
           }
         },

package/conf/config/loaders.js

@@ -1,8 +1,19 @@
-var path = require('path')
-var devMode = process.env.NODE_ENV !== 'production'
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+var path = require('path');
+var fs = require('fs');
+var devMode = process.env.NODE_ENV !== 'production';
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 var { merge } = require('webpack-merge');
-var { utils, processConfig } = require('../options')
+var { utils, processConfig } = require('../options');
+var sassGlobalStyles = '';
+processConfig.sassGlobalStyles.forEach((item) => {
+  return sassGlobalStyles += `@import "${item}";`;
+});
+try {
+  fs.accessSync(utils.rootPath('src/global.scss'), fs.constants.F_OK);
+  sassGlobalStyles += `@import "@/global.scss";`;
+} catch (err) {
+  // console.log(err);
+};
 module.exports = [
   {
     test: /\.t|jsx?$/,
@@ -59,7 +70,18 @@ module.exports = [
           }, processConfig.babelLoaderOptions)
         }
     ],
-    exclude: /node_modules/,
+    exclude: (modulePath) => {
+      // 定义你"强制需要编译"的模块列表
+      const includeModules = processConfig.compileDependencies;
+      if (modulePath.includes('node_modules')) {
+        // 检查当前路径是否包含这些包名
+        const shouldInclude = includeModules.some(name => 
+          modulePath.includes(`node_modules${path.sep}${name}${path.sep}`));
+        return !shouldInclude;
+      } else {
+        return false;
+      }
+    }
   },
   {
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -122,7 +144,7 @@ module.exports = [
       {
         loader: "sass-loader",
         options: merge({
-          additionalData: `@import "@/global.scss";`,
+          additionalData: sassGlobalStyles,
           implementation: require('sass'),
           sassOptions: {
             fiber: false,

package/conf/options.js

@@ -7,7 +7,9 @@ var argvPort = argvs.indexOf('--port') > -1 ? argvs[argvs.indexOf('--port') + 1]
 var {
     watch, port, dll, commonChunks, proxy, eslint, entry,
     nodeMiddleware, publicPath, buildDir, eslintExclude, alias,
-    cssLoaderOptions, postcssLoaderOptions, sassLoaderOptions, babelLoaderOptions,
+    cssLoaderOptions, postcssLoaderOptions, sassLoaderOptions, 
+    babelLoaderOptions, cacheBuildDependencies, compileDependencies,
+    sassGlobalStyles,
     ...webpackConfig
 } = userConfig;
 
@@ -34,7 +36,10 @@ exports.processConfig = {
     cssLoaderOptions: utils.isObj(cssLoaderOptions) ? cssLoaderOptions : {},
     postcssLoaderOptions: utils.isObj(postcssLoaderOptions) ? postcssLoaderOptions : {},
     sassLoaderOptions: utils.isObj(sassLoaderOptions) ? sassLoaderOptions : {},
-    babelLoaderOptions: utils.isObj(babelLoaderOptions) ? babelLoaderOptions : {}
+    babelLoaderOptions: utils.isObj(babelLoaderOptions) ? babelLoaderOptions : {},
+    cacheBuildDependencies: Array.isArray(cacheBuildDependencies) ? cacheBuildDependencies : [],
+    compileDependencies: Array.isArray(compileDependencies) ? compileDependencies : [],
+    sassGlobalStyles: Array.isArray(sassGlobalStyles) ? sassGlobalStyles : [],
 };
 
 exports.webpackConfig = merge({}, webpackConfig);

package/conf/webpack-server.js

@@ -1,6 +1,7 @@
 var { spawn, exec, execSync  } = require('child_process');
 var ora = require('ora');
 var path = require('path');
+var chalk = require('chalk');
 var { utils, processConfig }  = require('./options');
 var childProcess;
 
@@ -28,9 +29,19 @@ if (Array.isArray(processConfig.watch) && processConfig.watch.length > 0) {
  * 启动服务
  */
 module.exports = function startServer() {
-  var spinner = ora('Starting dev server...');
+  var spinner = ora('Starting dev server... \n');
   spinner.start();
-  childProcess = spawn('node', ['--max_old_space_size=4096', path.join(__dirname, './dev-server.js'), ...process.argv.slice(2)]);
+  childProcess = spawn(
+    'node',
+    ['--max_old_space_size=4096', path.join(__dirname, './dev-server.js'), ...process.argv.slice(2)],
+    {
+      env: Object.assign({}, process.env, {
+        NODE_ENV: 'development', // 根据需要修改或添加其它环境变量
+        // EXAMPLE_VAR: 'value'
+      }),
+      stdio: 'pipe'
+    }
+  );
 
   // 监听子进程输出
   childProcess.stdout.on('data', (data) => {
@@ -46,15 +57,15 @@ module.exports = function startServer() {
     const m = str.match(/(\d{1,3})%/);
     if (m) {
       const pct = m[1];
-      spinner.text = `Building ${pct}%`;
+      spinner.text = `Building ${chalk.green.bold(pct + '%')} `;
       if (pct === '100' || str.includes('100%')) {
-        spinner.succeed('Build 100%');
+        spinner.succeed(chalk.green.bold('Build 100%'));
         if (spinner.isSpinning) spinner.stop();
       }
       return;
     }
     if (str.includes('100%')) {
-      spinner.succeed('Build 100%');
+      spinner.succeed(chalk.green.bold('Build 100%'));
       if (spinner.isSpinning) spinner.stop();
     }
     // 捕获错误等信息并显示

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qmzreact",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "前端react本地启动服务和打包工具",
   "author": {
     "name": "qmz",