or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
Slides: https://hackmd.io/@aspect/rules_js
Note:
This talk has a bunch of links which you can come find in the slides.
Bazel: most scalable polyglot Build System.
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →JavaScript & TypeScript: most popular languages.
Note:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Note:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Who is Alex Eagle
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →What is Aspect
I Co-founded Aspect Development to make Bazel the industry-standard full-stack build system
What is Bazel
More: https://www.aspect.dev/resources
Note:
When to consider Bazel for frontend
More: https://www.aspect.dev/resources
Note:
None of those apply?
Small, disconnected JS apps shouldn't use Bazel.
The build system recommended by your framework is well supported for small-to-medium scale.
What is NodeJS
JavaScript engine that runs outside the browser.
Typically used for running dev tools to
build and test JavaScript programs.
Note:
What is
pnpm
Note:
What is
rules_nodejs
Bazel rules forked from Google-internal
DeclarationInfo
rules_js is a layer on
rules_nodejs
build_bazel_rules_nodejs
is replacedBuild systems:
Matrix / Hub-and-Spoke
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →ModernWeb Meetup: Layering in JS tooling
https://www.aspect.dev/resources
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Note:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Like Gulp or Grunt, but way (way) better.
Let's use Bazel!
How Bazel works
In five minutes
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Bazel: Loading Phase
Load and evaluate all extensions,
BUILD
files and macros that are needed for the build.Note:
bazel fetch [targets]
https://blog.aspect.dev/configuring-bazels-downloader
Bazel: Dependency Graph
Note:
bazel query
bazel query --output=graph [targets]
Bazel: Analysis Phase
Action: for a requested output, how to generate it from some inputs and tools
e.g. “if you need
hello.js
, runswc
onhello.ts
”.Requires predicting the outputs!
bazel aquery [targets]
Bazel: Execution Phase
Execute a subset of the action graph by spawning subprocesses (e.g.
node
)User requested certain targets be built.
Bazel is lazy and will only:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →How npm/yarn solve it
npm install
Install everything needed for the whole
package/workspace
Any build/test script can depend on all npm packages
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →How Google solves it
Vendor the world: copy npm ecosystem sources into VCS
You could do it this way too.
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →How rules_nodejs solved it
Just wrap
[npm|yarn] install
- install the world- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Note:
rules_js: ideal solution
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →@pnpm/lifecycle
to run hooksnode_modules
Note:
https://blog.aspect.dev/rulesjs-npm-benchmarks
Best case:
Note:
Workspaces
Mix of third-party and first-party deps in a tree of package.json files.
Google: single version policy
rules_nodejs: independent top-level dep installs
rules_js: supports pnpm workspaces!
Note:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →How it works in npm
NodeJS programs rely on a
node_modules
folder"Was a big mistake" says NodeJS creator, and
Deno fixes it (but here we are
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →The location of
node_modules
is expected to be relative to the location of the importing script.How Google solves it: patch
require
Same strategy as "PnP", e.g. Yarn PnP.
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →require
implementation.How rules_nodejs solves it: runtime "linker"
Similar to
npm link
: use symlinks to make monorepo libraries appear in the node_modules tree- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →genrule
/ctx.actions.run
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Note:
How rules_js solves it
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Node.js tools assume the working dir is a single tree of src/gen/node_modules: we can do that!
bazel-bin/node_modules/...
bazel-bin
cd bazel-out/[arch]/bin
Note:
This requires
copy_to_bin
and a bit of care in custom rules.- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →Documentation and migration guide:
https://docs.aspect.build/rules_js
Install
Copy the
WORKSPACE
snippet from latest release.https://github.com/aspect-build/rules_js/releases
Adopt pnpm
Just run
pnpm install
and check that your workflows work.Note:
import
pnpm-lock.yaml
npm_translate_lock
converts to Bazel's format (Starlark).WORKSPACE
Note:
$(bazel info output_base)/external/npm
to see what was generatedLink the npm packages
BUILD
(next topackage.json
)Result of
bazel build :all
is nowbazel build examples/...
Link first-party packages
First declare the package…
my-lib/BUILD
Note:
Link first-party packages
… then link to
bazel-bin/node_modules
tree…app/BUILD
…then depend on it just like it came from npm!
app/BUILD
Note:
Running npm tools
bin
entries from package.jsonbin
entrytsc
)There are also more advanced ways, see rules_js/examples
Note:
These options are easy, hard, harder, easy
bin
entries are provided for all packagesBUILD
Note:
Each bin exposes three rules:
foo
bazel build
foo_binary
bazel run
foo_test
bazel test
0
Wrap existing build system
Use "component libraries" to get coarse granularity
Pretty fast developer loop in
https://github.com/aspect-build/bazel-examples/tree/main/vue
Note:
ibazel run :vite
Write a Macro
Bazel macros are like preprocessor definitions.
Good way to give "syntax sugar",
compose a few rules, set defaults.
Indistinguishable from custom rules at use site
Example:
mocha
testhttps://github.com/aspect-build/rules_js/blob/main/examples/macro/mocha.bzl
Note:
bazel query --output=build
Write a custom rule
Harder and not recommended for most users.
Start from
https://bazel.build/rules/rules-tutorial
and use
https://github.com/bazel-contrib/rules-template
Use an existing custom rule
From https://github.com/aspect-build:
… and many more by other vendors
http://docs.aspect.build
Catalog coming soon at https://bazel-contrib.github.io/SIG-rules-authors/
Example custom rule:
ts_project
No more
rootDirs
intsconfig.json
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →BUILD
BUILD
ts_project with custom transpiler
BUILD
Benchmarks: ts_project w/ SWC
https://blog.aspect.dev/rules-ts-benchmarks
Transpile-only use case on large project
bazel build :devserver
Note:
time for a first, non-incremental build
Putting it all together
Sophisticated teams can assemble their own toolchain.
Create an entire JS build system just by composing existing tools in a macro!
Note:
Example: an entire custom build system called
"differential loading":
Roadmap
rules_js 1.0.0 is available now
Coming soon
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →BUILD
files from srcsWORKSPACE
https://blog.aspect.dev/bzlmod
Thank you!
These slides: https://hackmd.io/@aspect/rules_js
Thanks conference organizers and everyone who helped launch rules_js.
Come work with us on OSS! http://aspect.dev/careers
Paid support and consulting: http://aspect.dev
Our projects: github.com/aspect-build