feat: New Build System based on esbuild #12883

netchampfaris · 2021-04-17T09:54:30Z

A new build system based on the Go-based Javascript bundler https://github.com/evanw/esbuild.

Deprecated the use of build.json
*.bundle.* files placed anywhere in the public folder are bundled
Files types supported: .js, .ts, .css, .scss, .sass, .less, .styl
Built files are created in public/dist folder which is gitignored
This means every JS/CSS asset will always be under it's respective app folder in the assets folder. For e.g., desk.js will be at /assets/frappe/dist/js/desk.bundle.js. Previously, it was at /assets/js/desk.min.js.

Build Stats

Macbook Pro 15 inch 2019, 2.6 GHz 6-Core Intel Core i7, 16GB RAM

Build using rollup: 48.31s

~/Projects/benches/frappe-bench/apps/frappe esbuild
❯ bench build --app frappe
yarn run v1.22.4
$ node rollup/build.js --app frappe
Development mode
✔ Built js/moment-bundle.min.js
✔ Built js/libs.min.js

Building frappe assets...

✔ Built js/checkout.min.js
✔ Built js/dialog.min.js
✔ Built js/list.min.js
✔ Built js/web_form.min.js
✔ Built js/user_profile_controller.min.js
✔ Built js/frappe-recorder.min.js
✔ Built js/barcode_scanner.min.js
✔ Built js/bootstrap-4-web.min.js
✔ Built js/chat.js
✔ Built js/control.min.js
✔ Built js/report.min.js
✔ Built js/data_import_tools.min.js
✔ Built js/frappe-web.min.js
✔ Built js/desk.min.js
✔ Built css/frappe-rtl.css
✔ Built css/report.min.css
✔ Built css/frappe-chat-web.css
✔ Built css/web_form.css
✔ Built js/form.min.js
✔ Built css/printview.css
✔ Built css/email.css
✔ Built css/login.css
✔ Built css/frappe-web-b4.css
✔ Built css/desk.min.css
✨  Done in 43.753s
✨  Done in 48.31s.

Build using esbuild: 3.948s (~12x faster)

~/Projects/benches/frappe-bench/apps/frappe esbuild 55s
❯ node esbuild
frappe/public/build/js/controls.bundle.js 1087.445 Kb
frappe/public/build/js/desk.bundle.js 995.973 Kb
frappe/public/build/js/desk.bundle.css 423.239 Kb
frappe/public/build/js/form.bundle.js 1173.14 Kb
frappe/public/build/js/frappe-web.bundle.js 439.292 Kb
frappe/public/build/js/libs.bundle.js 981.026 Kb
frappe/public/build/js/list.bundle.js 169.587 Kb
frappe/public/build/js/report.bundle.js 170.955 Kb
Build time: 3.948s

DigitalOcean $5 Droplet, 1vCPU, 1GB RAM

Build using rollup: 386.77s

frappe@frappe-esbuild-test:~/frappe-bench/apps/frappe$ bench build --app frappe
yarn run v1.22.10
$ FRAPPE_ENV=production node rollup/build.js --app frappe
Production mode
✔ Built js/moment-bundle.min.js
✔ Built js/libs.min.js

Building frappe assets...

✔ Built js/checkout.min.js
✔ Built js/dialog.min.js
✔ Built js/web_form.min.js
✔ Built js/user_profile_controller.min.js
✔ Built js/list.min.js
✔ Built js/chat.js
✔ Built js/frappe-recorder.min.js
✔ Built js/barcode_scanner.min.js
✔ Built js/bootstrap-4-web.min.js
✔ Built css/frappe-rtl.css
✔ Built css/report.min.css
✔ Built js/data_import_tools.min.js
✔ Built js/frappe-web.min.js
✔ Built css/frappe-chat-web.css
✔ Built js/report.min.js
✔ Built css/web_form.css
✔ Built js/control.min.js
✔ Built js/desk.min.js
✔ Built css/printview.css
✔ Built css/email.css
✔ Built css/login.css
✔ Built css/frappe-web-b4.css
✔ Built js/form.min.js
✔ Built css/desk.min.css
✨  Done in 383.035s
Done in 386.77s.

Build using esbuild: 15.510s (~25x faster)

frappe@frappe-esbuild-test:~/frappe-bench/apps/frappe$ node esbuild
frappe/public/build/js/controls.bundle.js 1088.901 Kb
frappe/public/build/js/desk.bundle.js 997.065 Kb
frappe/public/build/js/desk.bundle.css 421.238 Kb
frappe/public/build/js/form.bundle.js 1175.061 Kb
frappe/public/build/js/frappe-web.bundle.js 438.942 Kb
frappe/public/build/js/libs.bundle.js 981.026 Kb
frappe/public/build/js/list.bundle.js 171.251 Kb
frappe/public/build/js/report.bundle.js 170.798 Kb
Build time: 15.510s

Features

CLI Output

Build Events in browser

WIP

Other changes

CSS for emails is now picked from hooks.py. Previously it was picked from hardcoded paths [app]/public/email.css

Documentation

- Deprecate use of build.json - *.bundle.js files placed anywhere in the public folder are bundled - Built files are created in public/build folder which is gitignored WIP

- add support for multiple file types

Previously email.css files were explicitly picked from hardcoded path like public/css/email.css for all apps

Ignore the commit which replaces use of Class.extend with native class in git blames

Jinja helpers to load js, css assets

surajshetty3416 · 2021-04-23T13:54:14Z

Convert Class.extend to ES6 class across the codebase

+1 for this 🎉

- Promisify frappe.require

- Separate file to import jquery and bootstrap - Remove separate jquery bundle from app as well as web - Load jquery from node_modules

- basic watch mode - Node paths include all app node_modules and app folders - rename output directory to "dist" - output files in flat directories: dist/js and dist/css

- For better HTTP caching and cache busting - assets.json is created under [app]/dist folder which contains the map of input file and output file name, this is used to get the correct path for bundled assets

centaur78 · 2021-05-19T06:49:47Z

hi @netchampfaris

just did a bench update.

The quotation doctype seems to be blank

below is console error

netchampfaris · 2021-05-19T07:00:52Z

@centaur78 Thanks for reporting. Fixed frappe/erpnext#25753

sagarvora · 2021-05-25T16:28:13Z

My preliminary issues with esbuild so far:

esbuild uses a polling based file watcher which is not as performant as rollup (causes development lags). It also seems to be rebuilding CSS files unnecessarily when JS code is modified. To solve this, we could maybe write our own watcher based on something like chokidar
CSS sourcemaps are not yet supported.

Backported from #12883

vrslev · 2021-09-19T09:00:27Z

@netchampfaris Hello! Are there plans to backport this to v13?

References: frappe/frappe#12883 https://frappeframework.com/docs/v13/user/en/basics/asset-bundling

netchampfaris force-pushed the esbuild branch from d29e07d to e468d4a Compare April 17, 2021 10:03

surajshetty3416 changed the title ~~feat: New Build System based on esbuild~~ build: New Build System based on esbuild Apr 17, 2021

netchampfaris changed the title ~~build: New Build System based on esbuild~~ feat: New Build System based on esbuild Apr 17, 2021

netchampfaris added 10 commits April 22, 2021 07:01

feat: New Build System based on esbuild

226ad1d

- Deprecate use of build.json - *.bundle.js files placed anywhere in the public folder are bundled - Built files are created in public/build folder which is gitignored WIP

fix: Build for all apps

a0a8f5c

fix: Compile ts, css, scss, sass, less, styl files

4172e1f

- add support for multiple file types

refactor: Use hooks to load email css files

3c824bb

Previously email.css files were explicitly picked from hardcoded path like public/css/email.css for all apps

fix: Create .bundle.* files that needs to bundled

3b54dac

refactor: Replace Class.extend with native class

fe20515

fix: Convert module.less to module.scss

a879f12

chore: Add git blame ignore revs file

b0329fa

Ignore the commit which replaces use of Class.extend with native class in git blames

fix: style, script, assets_url jinja helpers

6377141

Jinja helpers to load js, css assets

fix: Chart import

24f4502

netchampfaris force-pushed the esbuild branch from 69a9716 to 24f4502 Compare April 23, 2021 02:40

netchampfaris added 15 commits April 24, 2021 14:33

fix: Better error handling in frappe.utils.eval

8ad0472

fix: Lazy load jSignature

16a10e2

- Promisify frappe.require

fix: Convert to standard keydown handler

16ee80e

fix: Code field bug

8354940

fix: libs.bundle.js

c119f9a

- Separate file to import jquery and bootstrap - Remove separate jquery bundle from app as well as web - Load jquery from node_modules

fix: localforage import

1876307

fix: more features

0076e99

- basic watch mode - Node paths include all app node_modules and app folders - rename output directory to "dist" - output files in flat directories: dist/js and dist/css

fix: Update all /assets urls with new urls

34c6d09

Merge remote-tracking branch 'upstream/develop' into esbuild

2f10daf

fix: Build files with a single esbuild call

d81340e

fix: Pretty CLI Output

09f5e90

fix: Rename html plugin

62bd785

fix: Common sass_options

e20355c

fix: Include website.bundle.scss when compiling Website Theme

3b1cb34

fix: Hash based file naming

dd69f1a

- For better HTTP caching and cache busting - assets.json is created under [app]/dist folder which contains the map of input file and output file name, this is used to get the correct path for bundled assets

surajshetty3416 and others added 9 commits May 17, 2021 22:10

Merge branch 'develop' into esbuild

a544117

fix: Set node to version 14 again

d90660a

fix: Handle decode error when getting value from cache

dc04fe9

fix: Abort redis retries only for esbuild

8070702

fix: Use safe_eval instead eval

355a9e7

fix: Translate error message

f234761

fix: Handle AttributeError

792dd70

fix: redis createClient call

c5c50c2

fix: Show warning for incompatible node version

f6cd91b

surajshetty3416 approved these changes May 18, 2021

View reviewed changes

surajshetty3416 merged commit e9cf28b into frappe:develop May 18, 2021

surajshetty3416 deleted the esbuild branch May 18, 2021 11:29

centaur78 mentioned this pull request May 21, 2021

Doctypes not working ? frappe/erpnext#25790

Closed

surajshetty3416 mentioned this pull request May 23, 2021

fix: Rename email.bundle to erpnext_email.bundle frappe/erpnext#25804

Merged

surajshetty3416 added a commit that referenced this pull request Aug 4, 2021

fix: Add eval function

c9bac79

Backported from #12883

hasnain2808 mentioned this pull request Aug 5, 2021

app works only with develop branch frappe/wiki#10

Closed

ankush mentioned this pull request Aug 29, 2021

PLEASE STOP ADDING FEATURES #14065

Closed

ankush mentioned this pull request Jan 12, 2022

feat: Bulk import products from Shopify frappe/ecommerce_integrations#133

Merged

surajshetty3416 mentioned this pull request Jan 18, 2022

v14 Features & Enhancements surajshetty3416/frappe#25

Closed

surajshetty3416 mentioned this pull request Feb 22, 2022

fix(translations): Use correct path of built assets #16079

Merged

ankush mentioned this pull request Jul 5, 2022

You are running Vue in development mode. #9732

Closed

surajshetty3416 mentioned this pull request Jul 18, 2022

List of V14 features & enhancements #17532

Closed

adityahase added a commit to frappe/frappe_io that referenced this pull request Jul 19, 2022

fix: Move to new build system

e025d4c

References: frappe/frappe#12883 https://frappeframework.com/docs/v13/user/en/basics/asset-bundling

adityahase mentioned this pull request Jul 19, 2022

fix: Move to new build system frappe/frappe_io#323

Merged

github-actions bot locked as resolved and limited conversation to collaborators Nov 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: New Build System based on esbuild #12883

feat: New Build System based on esbuild #12883

netchampfaris commented Apr 17, 2021 •

edited by surajshetty3416

surajshetty3416 commented Apr 23, 2021

centaur78 commented May 19, 2021

netchampfaris commented May 19, 2021

sagarvora commented May 25, 2021

vrslev commented Sep 19, 2021

feat: New Build System based on esbuild #12883

feat: New Build System based on esbuild #12883

Conversation

netchampfaris commented Apr 17, 2021 • edited by surajshetty3416

Build Stats

Macbook Pro 15 inch 2019, 2.6 GHz 6-Core Intel Core i7, 16GB RAM

DigitalOcean $5 Droplet, 1vCPU, 1GB RAM

Features

WIP

Other changes

surajshetty3416 commented Apr 23, 2021

centaur78 commented May 19, 2021

netchampfaris commented May 19, 2021

sagarvora commented May 25, 2021

vrslev commented Sep 19, 2021

netchampfaris commented Apr 17, 2021 •

edited by surajshetty3416