解读

在国内前端面试中，这道题表面问“怎么用 Grunt 做导出”，实质考察三点：

1. 你是否理解可视化搭建产物的通用结构（JSON Schema + 资产包 + 依赖映射）；
2. 能否把“导出”拆解成可自动化、可复现、可灰度的构建任务；
3. 是否能在不 eject 已有 React 工程的前提下，用 Grunt 把产物无缝注入，并保证后续团队可维护。
   面试官常通过追问“如果搭建平台升级了组件版本，如何向下兼容？”来验证你对任务流闭环的掌控力。

知识点

1. Grunt 任务生命周期：init → loadNpmTasks → registerTask → run；
2. grunt-contrib-clean / copy / template / concat / uglify / babel 等官方插件的链式执行顺序与options 覆盖规则；
3. grunt-file-creator 与 grunt-text-replace 在“动态生成入口文件”时的差异；
4. React 项目元数据：package.json 的 dependencies、src/index.js、public/index.html、webpack 入口；
5. 可视化搭建协议：阿里低代码、腾讯云微搭、美团乐高均用 “pageSchema + componentMap” 双文件模型；
6. 国内私服场景：需把 .npmrc、yarn.lock、tnpm 客户端地址一并写入模板，否则 CI 会 404；
7. 灰度发布：通过 grunt-git-commit 自动打 tag，再调用企业微信机器人通知 QA 拉取体验包。

答案

1. 目录约定
   ├─ grunt-export/
   │ ├─ templates/react-app/ // 预置的 React 17 骨架
   │ │ ├─ public/
   │ │ ├─ src/
   │ │ └─ package.json.tmpl
   │ ├─ tasks/
   │ │ └─ export-react.js
   │ └─ Gruntfile.js

2. 关键任务拆分
   a. fetch-schema：通过 axios 拉取最新 pageSchema.json 与 componentMap.json，写入 .tmp/；
   b. validate-schema：用 grunt-jsonschema 校验，防止字段缺失导致渲染失败；
   c. gen-entry：读取 schema，递归生成 React 组件树字符串，借助 grunt-template 输出到 src/pages/Index.jsx；
   d. sync-deps：把 componentMap 中的包名版本映射成 dependencies 字段，合并到 templates/react-app/package.json.tmpl，生成最终 package.json；
   e. copy-static：把 templates/react-app/** 整体拷贝到 dist/react-export/，同时把 .tmp/ 里的图片字体搬到 public/assets/；
   f. transpile：grunt-babel 把 ESNext+JSX 编译为 ES5，兼容国内仍需支持 IE11 的政务项目；
   g. inject-cdn：若客户要求走国内 CDN，grunt-replace 把 react、react-dom 换成 bootcdn 地址并加 crossorigin；
   h. zip：grunt-contrib-compress 打出 react-export.zip，供用户一键下载；
   i. notify：grunt-exec 调用企业微信 hook，把下载地址推送到群。

3. 核心代码片段（Gruntfile.js）
   module.exports = function(grunt) {
   grunt.initConfig({
   clean: { export: ['dist/react-export'] },
   copy: {
   skeleton: {
   expand: true,
   cwd: 'templates/react-app/',
   src: '',
   dest: 'dist/react-export/'
   }
   },
   template: {
   entry: {
   options: { data: () => JSON.parse(grunt.file.read('.tmp/pageSchema.json')) },
   files: { 'dist/react-export/src/pages/Index.jsx': ['templates/react-app/src/pages/Index.tmpl'] }
   },
   pkg: {
   options: {
   data: function() {
   const map = JSON.parse(grunt.file.read('.tmp/componentMap.json'));
   const deps = {};
   Object.values(map).forEach(m => deps[m.package] = m.version);
   return { dependencies: deps };
   }
   },
   files: { 'dist/react-export/package.json': ['templates/react-app/package.json.tmpl'] }
   }
   },
   babel: {
   options: { presets: ['@babel/preset-react', '@babel/preset-env'] },
   dist: { files: [{ expand: true, cwd: 'dist/react-export/src', src: '/*.jsx', dest: 'dist/react-export/src', ext: '.js' }] }
   },
   compress: {
   main: {
   options: { archive: 'dist/react-export.zip' },
   expand: true, cwd: 'dist/', src: 'react-export/**'
   }
   }
   });

   grunt.registerTask('export-react', [
   'clean:export',
   'fetch-schema', // 自定义任务
   'validate-schema', // 自定义任务
   'gen-entry', // 自定义任务
   'sync-deps', // 自定义任务
   'copy:skeleton',
   'template',
   'babel',
   'inject-cdn', // 自定义任务
   'compress',
   'notify'
   ]);
   };

4. 运行
   grunt export-react
   产出物 dist/react-export.zip，解压后可直接 tnpm i && tnpm start，与 create-react-app 体验一致。

拓展思考

1. 版本漂移：把 componentMap.json 的 sha256 写入 package.json 的 “lowcodeLock” 字段，CI 构建时若不一致直接失败，防止“本地跑得了、线上跑不了”。
2. 微前端嵌入：在 gen-entry 阶段加选项，若用户选择“微前端”，则把 ReactDOM.render 换成 qiankun 的 render 函数，并生成主应用需要的生命周期导出文件。
3. Serverless 直出：grunt 任务链后追加 grunt-aws-lambda-pack，把构建产物直接打成 Layer，上传到阿里云函数计算，实现“可视化页面一键部署为 SSR”。
4. 性能兜底：在 babel 后插入 grunt-terser，同时用 grunt-critical 提取首屏关键 CSS，国内 4G 弱网可提升 30% FCP。
5. 合规审计：金融类客户要求 npm 包必须过“信创扫描”，可在任务尾部加 grunt-exec 调用公司自研的 black-duck-cli，若发现 GPL 组件立即中断流水线并邮件告警。