1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
metamask-extension/development/build
Elliot Winkler 1e494f3004
Refactor ESLint config (#13482)
We would like to insert TypeScript into the ESLint configuration, and
because of the way that the current config is organized, that is not
easy to do.

Most files are assumed to be files that are suited for running in a
browser context. This isn't correct, as we should expect most files to
work in a Node context instead. This is because all browser-based files
will be run through a transpiler that is able to make use of
Node-specific variables anyway.

There are a couple of important ways we can categories files which our
ESLint config should be capable of handling well:

* Is the file a script or a module? In other words, does the file run
  procedurally or is the file intended to be brought into an existing
  file?
* If the file is a module, does it use the CommonJS syntax (`require()`)
  or does it use the ES syntax (`import`/`export`)?

When we introduce TypeScript, this set of questions will become:

* Is the file a script or a module?
* If the file is a module, is it a JavaScript module or a TypeScript
  module?
* If the file is a JavaScript module, does it use the CommonJS syntax
  (`require()`) or does it use the ES syntax (`import`/`export`)?

To represent these divisions, this commit removes global rules — so now
all of the rules are kept in `overrides` for explicitness — and sets up
rules for CommonJS- and ES-module-compatible files that intentionally do
not overlap with each other. This way TypeScript (which has its own set
of rules independent from JavaScript and therefore shouldn't overlap
with the other rules either) can be easily added later.

Finally, this commit splits up the ESLint config into separate files and
adds documentation to each section. This way sets of rules which are
connected to a particular plugin (`jsdoc`, `@babel`, etc.) can be easily
understood instead of being obscured.
2022-02-28 10:42:09 -07:00
..
transforms Refactor ESLint config (#13482) 2022-02-28 10:42:09 -07:00
display.js Rationalize build system arguments (#12047) 2021-09-09 12:44:57 -07:00
etc.js Add build type to Sentry environment (#12441) 2021-10-25 14:27:30 -02:30
index.js Add JSDoc ESLint rules (#12112) 2022-01-07 12:27:33 -03:30
manifest.js Fix browser specific manifest generation (#13007) 2021-12-07 16:31:01 -06:00
README.md Fix LavaMoat background policy generation (#12844) 2021-11-26 16:38:23 -03:30
sass-compiler.js Add Lavamoat to build system (#9939) 2021-02-22 22:43:29 +08:00
scripts.js Prevent Browserify error from being swallowed (#13647) 2022-02-17 13:47:50 -07:00
static.js Add platform-specific build type manifest modifications (#12638) 2021-11-10 19:33:59 -03:30
styles.js remove the ui/app and ui/lib folders (#10911) 2021-04-28 14:53:59 -05:00
task.js Fix LavaMoat background policy generation (#12844) 2021-11-26 16:38:23 -03:30
utils.js Add JSDoc ESLint rules (#12112) 2022-01-07 12:27:33 -03:30

The MetaMask Build System

tl;dr yarn dist for prod, yarn start for local development

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", "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]