Sharing Top Content from the Angular-sphere.

Production Bundling With Bazel – nrwl

  • BazelProduction Bundling With BazelDisclaimer: Bazel with Angular is still considered experimental by the Angular team.In this article we will show how to use Bazel to create an Angular production build.This particular example uses Rollup, but the techniques discussed in this article apply to other third party bundlers as well.We will show…
  • The es6 rule can be called from our BUILD.bazel file with an ng_module rule as a dependency:At this point we have pure ES6 JavaScript files outputted by our build.In the next section we will show how to combine the individual JavaScript files into a single, optimized production bundle.Rollup BundlingIn this…
  • This enables us to reference the executable as a regular Bazel rule from within our custom Rollup rule.The full Rollup rule can be found below:As we mentioned earlier, the production bundling is a three step process (bundling, converting ES6 to ES5 and Uglify).
  • Similarly to how we wrapped Rollup itself, we can also wrap other third party binaries like TypeScript and Uglify.In all three cases we have defined Bazel actions to trigger the wrapped executables.The actions are invoked with parameters, similar to how you would do it on the command line.To customise this…
  • The bundle name is of course configurable via the outputs in the Rollup Bazel rule.The nodejs_binary wrappers for the three executables can be found below:In summary, the execution of our Rollup rule breaks down to the following three steps:Step1Bundle multiple ES6 JavaScript files into a single ES6 bundle using Rollup.Step2Downlevel…

This particular example uses Rollup, but the techniques discussed in this article apply to other third party bundlers as well. The sample application used for this article is a simple treeview…

BazelProduction Bundling With BazelDisclaimer: Bazel with Angular is still considered experimental by the Angular team.In this article we will show how to use Bazel to create an Angular production build.This particular example uses Rollup, but the techniques discussed in this article apply to other third party bundlers as well.We will show how to:Transpile TypeScript to ES6 JavaScriptBundle multiple ES6 JavaScript files into a single ES5 Angular bundleDeploy the application to a web serverIf you are new to Bazel you may want to check out our Introduction to Bazel article first.The sample application used for this article is a simple treeview directory of a very random media collection.A screenshot of the application can be seen below:TypeScript TranspilationDuring TypeScript transpilation, the first thing we have to do is ask Bazel to transpile our TypeScript to ES6 JavaScript.ES6 is prefered over ES5 since it allows for more aggressive optimizations during bundling (e.g. tree shaking).Many existing build pipelines configure different JavaScript output formats through multiple tsconfig.json files.In Bazel we only need a single tsconfig.json file since we leave it to Bazel to provide the correct output format based on context. To keep it simple the only available output formats are ES5 and ES6.To ask Bazel to output ES6 JavaScript we have created a simple Bazel rule called es6:The name es6 is not significant here. You can name it whatever you like.The implementation of the es6 rule is basically just a pass through to the imported collect_es6_sources from build_bazel_rules_nodejs.The es6 rule can be called from our…

Production Bundling With Bazel – nrwl

Comments are closed, but trackbacks and pingbacks are open.