Sharing Top Content from the Angular-sphere.

Production Bundling With Bazel – nrwl

  • We even go into details about how to create your own Bazel rules.To make this easier to consume for developers, we could package all the rules into a single published rule instead.We will show how to:Transpile TypeScript to ES6 JavaScriptBundle multiple ES6 JavaScript files into a single ES5 Angular bundleDeploy…
  • 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. We should point out that this example shows how to implement Rollup…

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 should point out that this example shows how to implement Rollup bundling in Bazel from the ground up. We even go into details about how to create your own Bazel rules.To make this easier to consume for developers, we could package all the rules into a single published rule instead.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…

Production Bundling With Bazel – nrwl

Comments are closed, but trackbacks and pingbacks are open.