1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 20:02:58 +01:00
metamask-extension/development/build
Elliot Winkler 53006d4cf0
Add TypeScript to the build system (#13489)
This commit modifies the build system so that TypeScript files can be
transpiled into ES5 just like JavaScript files.

Note that this commit does NOT change the build system to run TypeScript
files through the TypeScript compiler. In other words, no files will be
type-checked at the build stage, as we expect type-checking to be
handled elsewhere (live, via your editor integration with `tsserver`,
and before a PR is merged, via `yarn lint`). Rather, we merely instruct
Babel to strip TypeScript-specific syntax from any files that have it,
as if those files had been written using JavaScript syntax alone.

Why take this approach? Because it prevents the build process from being
negatively impacted with respect to performance (as TypeScript takes a
significant amount of time to run).

It's worth noting the downside of this approach: because we aren't
running files through TypeScript, but relying on Babel's [TypeScript
transform][1] to identify TypeScript syntax, this transform has to keep
up with any syntax changes that TypeScript adds in the future. In fact
there are a few syntactical forms that Babel already does not recognize.
These forms are rare or are deprecated by TypeScript, so I don't
consider them to be a blocker, but it's worth noting just in case it
comes up later. Also, any settings we place in `tsconfig.json` will be
completely ignored by Babel. Again, this isn't a blocker because there
are some analogs for the most important settings reflected in the
options we can pass to the transform. These and other caveats are
detailed in the [documentation for the transform][2].

[1]: https://babeljs.io/docs/en/babel-plugin-transform-typescript
[2]: https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats
2022-03-28 16:33:40 -06:00
..
transforms Derive version suffix from build type and version (#13895) 2022-03-10 12:31:50 -03:30
display.js Rationalize build system arguments (#12047) 2021-09-09 12:44:57 -07:00
etc.js Derive version suffix from build type and version (#13895) 2022-03-10 12:31:50 -03:30
index.js Add TypeScript to the build system (#13489) 2022-03-28 16:33:40 -06:00
manifest.js Derive version suffix from build type and version (#13895) 2022-03-10 12:31:50 -03:30
README.md Document Flask build flag (#13597) 2022-03-02 23:56:04 -08:00
sass-compiler.js
scripts.js Add TypeScript to the build system (#13489) 2022-03-28 16:33:40 -06:00
static.js Derive version suffix from build type and version (#13895) 2022-03-10 12:31:50 -03:30
styles.js
task.js Fix LavaMoat background policy generation (#12844) 2021-11-26 16:38:23 -03:30
utils.js Derive version suffix from build type and version (#13895) 2022-03-10 12:31:50 -03:30

The MetaMask Build System

tl;dr yarn dist for prod, yarn start for local development. Add --build-type flask to build Flask, our canary distribution with more experimental features.

This directory contains the MetaMask build system, which is used to build the MetaMask Extension such that it can be used in a supported browser. From the repository root, the build system entry file is located at ./development/build/index.js.

Several package scripts invoke the build system. For example, yarn start creates a watched development build, and yarn dist creates a production build. Some of these scripts applies lavamoat to the build system, and some do not. For local development, building without lavamoat is faster and therefore preferable.

The build system is not a full-featured CLI, but rather a script that expects some command line arguments and environment variables. For instructions regarding environment variables, see the main repository readme.

Generally speaking, the build system consists of gulp tasks that either manipulate static assets or bundle source files using Browserify. Production-ready zip files are written to the ./builds directory, while "unpacked" extension builds are written to the ./dist directory.

Our JavaScript source files are transformed using Babel, specifically using the babelify Browserify transform. Source file bundling tasks are implemented in the ./development/build/scripts.js.

Locally implemented Browserify transforms, some of which affect how we write JavaScript, are listed and documented here.

Usage

Usage: yarn build <entry-task> [options]

Commands:
  yarn build prod       Create an optimized build for production environments.

  yarn build dev        Create an unoptimized, live-reloaded build for local
                        development.

  yarn build test       Create an optimized build for running e2e tests.

  yarn build testDev    Create an unoptimized, live-reloaded build for running
                        e2e tests.

Options:
  --build-type        The "type" of build to create. One of: "beta", "flask",
                      "main"
                                                      [string] [default: "main"]
  --lint-fence-files  Whether files with code fences should be linted after
                      fences have been removed by the code fencing transform.
                      The build will fail if linting fails.
                      Defaults to `false` if the entry task is `dev` or
                      `testDev`, and `true` otherwise.
                                                   [boolean] [default: <varies>]
  --lockdown          Whether to include SES lockdown files in the extension
                      bundle. Setting this to `false` is useful e.g. when
                      linking dependencies that are incompatible with lockdown.
                                                       [boolean] [default: true]
  --policy-only       Stops the build after generating the LavaMoat policy,
                      skipping any writes to disk.
                                                       [boolean] [deafult: false]
  --skip-stats        Whether to refrain from logging build progress. Mostly
                      used internally.
                                                      [boolean] [default: false]