Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 
 
 

535 lignes
13 KiB

  1. /* eslint-disable no-console */
  2. let path = require("path");
  3. let fs = require("fs");
  4. let glob = require("fast-glob");
  5. let esbuild = require("esbuild");
  6. let vue = require("esbuild-vue");
  7. let yargs = require("yargs");
  8. let cliui = require("cliui")();
  9. let chalk = require("chalk");
  10. let html_plugin = require("./frappe-html");
  11. let rtlcss = require('rtlcss');
  12. let postCssPlugin = require("esbuild-plugin-postcss2").default;
  13. let ignore_assets = require("./ignore-assets");
  14. let sass_options = require("./sass_options");
  15. let {
  16. app_list,
  17. assets_path,
  18. apps_path,
  19. sites_path,
  20. get_app_path,
  21. get_public_path,
  22. log,
  23. log_warn,
  24. log_error,
  25. bench_path,
  26. get_redis_subscriber
  27. } = require("./utils");
  28. let argv = yargs
  29. .usage("Usage: node esbuild [options]")
  30. .option("apps", {
  31. type: "string",
  32. description: "Run build for specific apps"
  33. })
  34. .option("skip_frappe", {
  35. type: "boolean",
  36. description: "Skip building frappe assets"
  37. })
  38. .option("files", {
  39. type: "string",
  40. description: "Run build for specified bundles"
  41. })
  42. .option("watch", {
  43. type: "boolean",
  44. description: "Run in watch mode and rebuild on file changes"
  45. })
  46. .option("production", {
  47. type: "boolean",
  48. description: "Run build in production mode"
  49. })
  50. .option("run-build-command", {
  51. type: "boolean",
  52. description: "Run build command for apps"
  53. })
  54. .example(
  55. "node esbuild --apps frappe,erpnext",
  56. "Run build only for frappe and erpnext"
  57. )
  58. .example(
  59. "node esbuild --files frappe/website.bundle.js,frappe/desk.bundle.js",
  60. "Run build only for specified bundles"
  61. )
  62. .version(false).argv;
  63. const APPS = (!argv.apps ? app_list : argv.apps.split(",")).filter(
  64. app => !(argv.skip_frappe && app == "frappe")
  65. );
  66. const FILES_TO_BUILD = argv.files ? argv.files.split(",") : [];
  67. const WATCH_MODE = Boolean(argv.watch);
  68. const PRODUCTION = Boolean(argv.production);
  69. const RUN_BUILD_COMMAND = !WATCH_MODE && Boolean(argv["run-build-command"]);
  70. const TOTAL_BUILD_TIME = `${chalk.black.bgGreen(" DONE ")} Total Build Time`;
  71. const NODE_PATHS = [].concat(
  72. // node_modules of apps directly importable
  73. app_list
  74. .map(app => path.resolve(get_app_path(app), "../node_modules"))
  75. .filter(fs.existsSync),
  76. // import js file of any app if you provide the full path
  77. app_list
  78. .map(app => path.resolve(get_app_path(app), ".."))
  79. .filter(fs.existsSync)
  80. );
  81. execute()
  82. .then(() => RUN_BUILD_COMMAND && run_build_command_for_apps(APPS))
  83. .catch(e => console.error(e));
  84. if (WATCH_MODE) {
  85. // listen for open files in editor event
  86. open_in_editor();
  87. }
  88. async function execute() {
  89. console.time(TOTAL_BUILD_TIME);
  90. if (!FILES_TO_BUILD.length) {
  91. await clean_dist_folders(APPS);
  92. }
  93. let results;
  94. try {
  95. results = await build_assets_for_apps(APPS, FILES_TO_BUILD);
  96. } catch (e) {
  97. log_error("There were some problems during build");
  98. log();
  99. log(chalk.dim(e.stack));
  100. if (process.env.CI) {
  101. process.kill(process.pid);
  102. }
  103. return;
  104. }
  105. if (!WATCH_MODE) {
  106. log_built_assets(results);
  107. console.timeEnd(TOTAL_BUILD_TIME);
  108. log();
  109. } else {
  110. log("Watching for changes...");
  111. }
  112. for (const result of results) {
  113. await write_assets_json(result.metafile);
  114. }
  115. }
  116. function build_assets_for_apps(apps, files) {
  117. let { include_patterns, ignore_patterns } = files.length
  118. ? get_files_to_build(files)
  119. : get_all_files_to_build(apps);
  120. return glob(include_patterns, { ignore: ignore_patterns }).then(files => {
  121. let output_path = assets_path;
  122. let file_map = {};
  123. let style_file_map = {};
  124. let rtl_style_file_map = {};
  125. for (let file of files) {
  126. let relative_app_path = path.relative(apps_path, file);
  127. let app = relative_app_path.split(path.sep)[0];
  128. let extension = path.extname(file);
  129. let output_name = path.basename(file, extension);
  130. if (
  131. [".css", ".scss", ".less", ".sass", ".styl"].includes(extension)
  132. ) {
  133. output_name = path.join("css", output_name);
  134. } else if ([".js", ".ts"].includes(extension)) {
  135. output_name = path.join("js", output_name);
  136. }
  137. output_name = path.join(app, "dist", output_name);
  138. if (Object.keys(file_map).includes(output_name) || Object.keys(style_file_map).includes(output_name)) {
  139. log_warn(
  140. `Duplicate output file ${output_name} generated from ${file}`
  141. );
  142. }
  143. if ([".css", ".scss", ".less", ".sass", ".styl"].includes(extension)) {
  144. style_file_map[output_name] = file;
  145. rtl_style_file_map[output_name.replace('/css/', '/css-rtl/')] = file;
  146. } else {
  147. file_map[output_name] = file;
  148. }
  149. }
  150. let build = build_files({
  151. files: file_map,
  152. outdir: output_path
  153. });
  154. let style_build = build_style_files({
  155. files: style_file_map,
  156. outdir: output_path
  157. });
  158. let rtl_style_build = build_style_files({
  159. files: rtl_style_file_map,
  160. outdir: output_path,
  161. rtl_style: true
  162. });
  163. return Promise.all([build, style_build, rtl_style_build]);
  164. });
  165. }
  166. function get_all_files_to_build(apps) {
  167. let include_patterns = [];
  168. let ignore_patterns = [];
  169. for (let app of apps) {
  170. let public_path = get_public_path(app);
  171. include_patterns.push(
  172. path.resolve(
  173. public_path,
  174. "**",
  175. "*.bundle.{js,ts,css,sass,scss,less,styl}"
  176. )
  177. );
  178. ignore_patterns.push(
  179. path.resolve(public_path, "node_modules"),
  180. path.resolve(public_path, "dist")
  181. );
  182. }
  183. return {
  184. include_patterns,
  185. ignore_patterns
  186. };
  187. }
  188. function get_files_to_build(files) {
  189. // files: ['frappe/website.bundle.js', 'erpnext/main.bundle.js']
  190. let include_patterns = [];
  191. let ignore_patterns = [];
  192. for (let file of files) {
  193. let [app, bundle] = file.split("/");
  194. let public_path = get_public_path(app);
  195. include_patterns.push(path.resolve(public_path, "**", bundle));
  196. ignore_patterns.push(
  197. path.resolve(public_path, "node_modules"),
  198. path.resolve(public_path, "dist")
  199. );
  200. }
  201. return {
  202. include_patterns,
  203. ignore_patterns
  204. };
  205. }
  206. function build_files({ files, outdir }) {
  207. let build_plugins = [
  208. html_plugin,
  209. vue(),
  210. ];
  211. return esbuild.build(get_build_options(files, outdir, build_plugins));
  212. }
  213. function build_style_files({ files, outdir, rtl_style=false }) {
  214. let plugins = [];
  215. if (rtl_style) {
  216. plugins.push(rtlcss);
  217. }
  218. let build_plugins = [
  219. ignore_assets,
  220. postCssPlugin({
  221. plugins: plugins,
  222. sassOptions: sass_options
  223. })
  224. ];
  225. plugins.push(require("autoprefixer"));
  226. return esbuild.build(get_build_options(files, outdir, build_plugins));
  227. }
  228. function get_build_options(files, outdir, plugins) {
  229. return {
  230. entryPoints: files,
  231. entryNames: "[dir]/[name].[hash]",
  232. outdir,
  233. sourcemap: true,
  234. bundle: true,
  235. metafile: true,
  236. minify: PRODUCTION,
  237. nodePaths: NODE_PATHS,
  238. define: {
  239. "process.env.NODE_ENV": JSON.stringify(
  240. PRODUCTION ? "production" : "development"
  241. )
  242. },
  243. plugins: plugins,
  244. watch: get_watch_config()
  245. };
  246. }
  247. function get_watch_config() {
  248. if (WATCH_MODE) {
  249. return {
  250. async onRebuild(error, result) {
  251. if (error) {
  252. log_error("There was an error during rebuilding changes.");
  253. log();
  254. log(chalk.dim(error.stack));
  255. notify_redis({ error });
  256. } else {
  257. let {
  258. assets_json,
  259. prev_assets_json
  260. } = await write_assets_json(result.metafile);
  261. if (prev_assets_json) {
  262. log_rebuilt_assets(prev_assets_json, assets_json);
  263. }
  264. notify_redis({ success: true });
  265. }
  266. }
  267. };
  268. }
  269. return null;
  270. }
  271. async function clean_dist_folders(apps) {
  272. for (let app of apps) {
  273. let public_path = get_public_path(app);
  274. let paths = [
  275. path.resolve(public_path, "dist", "js"),
  276. path.resolve(public_path, "dist", "css"),
  277. path.resolve(public_path, "dist", "css-rtl")
  278. ];
  279. for (let target of paths) {
  280. if (fs.existsSync(target)) {
  281. // rmdir is deprecated in node 16, this will work in both node 14 and 16
  282. let rmdir = fs.promises.rm || fs.promises.rmdir;
  283. await rmdir(target, { recursive: true });
  284. }
  285. }
  286. }
  287. }
  288. function log_built_assets(results) {
  289. let outputs = {};
  290. for (const result of results) {
  291. outputs = Object.assign(outputs, result.metafile.outputs);
  292. }
  293. let column_widths = [60, 20];
  294. cliui.div(
  295. {
  296. text: chalk.cyan.bold("File"),
  297. width: column_widths[0]
  298. },
  299. {
  300. text: chalk.cyan.bold("Size"),
  301. width: column_widths[1]
  302. }
  303. );
  304. cliui.div("");
  305. let output_by_dist_path = {};
  306. for (let outfile in outputs) {
  307. if (outfile.endsWith(".map")) continue;
  308. let data = outputs[outfile];
  309. outfile = path.resolve(outfile);
  310. outfile = path.relative(assets_path, outfile);
  311. let filename = path.basename(outfile);
  312. let dist_path = outfile.replace(filename, "");
  313. output_by_dist_path[dist_path] = output_by_dist_path[dist_path] || [];
  314. output_by_dist_path[dist_path].push({
  315. name: filename,
  316. size: (data.bytes / 1000).toFixed(2) + " Kb"
  317. });
  318. }
  319. for (let dist_path in output_by_dist_path) {
  320. let files = output_by_dist_path[dist_path];
  321. cliui.div({
  322. text: dist_path,
  323. width: column_widths[0]
  324. });
  325. for (let i in files) {
  326. let file = files[i];
  327. let branch = "";
  328. if (i < files.length - 1) {
  329. branch = "├─ ";
  330. } else {
  331. branch = "└─ ";
  332. }
  333. let color = file.name.endsWith(".js") ? "green" : "blue";
  334. cliui.div(
  335. {
  336. text: branch + chalk[color]("" + file.name),
  337. width: column_widths[0]
  338. },
  339. {
  340. text: file.size,
  341. width: column_widths[1]
  342. }
  343. );
  344. }
  345. cliui.div("");
  346. }
  347. log(cliui.toString());
  348. }
  349. // to store previous build's assets.json for comparison
  350. let prev_assets_json;
  351. let curr_assets_json;
  352. async function write_assets_json(metafile) {
  353. prev_assets_json = curr_assets_json;
  354. let out = {};
  355. for (let output in metafile.outputs) {
  356. let info = metafile.outputs[output];
  357. let asset_path = "/" + path.relative(sites_path, output);
  358. if (info.entryPoint) {
  359. let key = path.basename(info.entryPoint);
  360. if (key.endsWith('.css') && asset_path.includes('/css-rtl/')) {
  361. key = `rtl_${key}`;
  362. }
  363. out[key] = asset_path;
  364. }
  365. }
  366. let assets_json_path = path.resolve(assets_path, "assets.json");
  367. let assets_json;
  368. try {
  369. assets_json = await fs.promises.readFile(assets_json_path, "utf-8");
  370. } catch (error) {
  371. assets_json = "{}";
  372. }
  373. assets_json = JSON.parse(assets_json);
  374. // update with new values
  375. assets_json = Object.assign({}, assets_json, out);
  376. curr_assets_json = assets_json;
  377. await fs.promises.writeFile(
  378. assets_json_path,
  379. JSON.stringify(assets_json, null, 4)
  380. );
  381. await update_assets_json_in_cache(assets_json);
  382. return {
  383. assets_json,
  384. prev_assets_json
  385. };
  386. }
  387. function update_assets_json_in_cache(assets_json) {
  388. // update assets_json cache in redis, so that it can be read directly by python
  389. return new Promise(resolve => {
  390. let client = get_redis_subscriber("redis_cache");
  391. // handle error event to avoid printing stack traces
  392. client.on("error", _ => {
  393. log_warn("Cannot connect to redis_cache to update assets_json");
  394. });
  395. client.set("assets_json", JSON.stringify(assets_json), err => {
  396. client.unref();
  397. resolve();
  398. });
  399. });
  400. }
  401. function run_build_command_for_apps(apps) {
  402. let cwd = process.cwd();
  403. let { execSync } = require("child_process");
  404. for (let app of apps) {
  405. if (app === "frappe") continue;
  406. let root_app_path = path.resolve(get_app_path(app), "..");
  407. let package_json = path.resolve(root_app_path, "package.json");
  408. if (fs.existsSync(package_json)) {
  409. let { scripts } = require(package_json);
  410. if (scripts && scripts.build) {
  411. log("\nRunning build command for", chalk.bold(app));
  412. process.chdir(root_app_path);
  413. execSync("yarn build", { encoding: "utf8", stdio: "inherit" });
  414. }
  415. }
  416. }
  417. process.chdir(cwd);
  418. }
  419. async function notify_redis({ error, success }) {
  420. // notify redis which in turns tells socketio to publish this to browser
  421. let subscriber = get_redis_subscriber("redis_socketio");
  422. subscriber.on("error", _ => {
  423. log_warn("Cannot connect to redis_socketio for browser events");
  424. });
  425. let payload = null;
  426. if (error) {
  427. let formatted = await esbuild.formatMessages(error.errors, {
  428. kind: "error",
  429. terminalWidth: 100
  430. });
  431. let stack = error.stack.replace(new RegExp(bench_path, "g"), "");
  432. payload = {
  433. error,
  434. formatted,
  435. stack
  436. };
  437. }
  438. if (success) {
  439. payload = {
  440. success: true
  441. };
  442. }
  443. subscriber.publish(
  444. "events",
  445. JSON.stringify({
  446. event: "build_event",
  447. message: payload
  448. })
  449. );
  450. }
  451. function open_in_editor() {
  452. let subscriber = get_redis_subscriber("redis_socketio");
  453. subscriber.on("error", _ => {
  454. log_warn("Cannot connect to redis_socketio for open_in_editor events");
  455. });
  456. subscriber.on("message", (event, file) => {
  457. if (event === "open_in_editor") {
  458. file = JSON.parse(file);
  459. let file_path = path.resolve(file.file);
  460. log("Opening file in editor:", file_path);
  461. let launch = require("launch-editor");
  462. launch(`${file_path}:${file.line}:${file.column}`);
  463. }
  464. });
  465. subscriber.subscribe("open_in_editor");
  466. }
  467. function log_rebuilt_assets(prev_assets, new_assets) {
  468. let added_files = [];
  469. let old_files = Object.values(prev_assets);
  470. let new_files = Object.values(new_assets);
  471. for (let filepath of new_files) {
  472. if (!old_files.includes(filepath)) {
  473. added_files.push(filepath);
  474. }
  475. }
  476. log(
  477. chalk.yellow(
  478. `${new Date().toLocaleTimeString()}: Compiled ${
  479. added_files.length
  480. } files...`
  481. )
  482. );
  483. for (let filepath of added_files) {
  484. let filename = path.basename(filepath);
  485. log(" " + filename);
  486. }
  487. log();
  488. }