mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-06 12:01:40 +08:00

Files

T

Tim van der Lippe 16aca394c5 Update ESLint and related packages

Major update breaking changes:
- ESLint 7.0.0 (https://eslint.org/docs/user-guide/migrating-to-7.0.0) now includes
.eslint.rc.js in its list, which is fine for us. Other changes are not applicable
for us.
- eslint-plugin-mocha (https://github.com/lo1tuma/eslint-plugin-mocha/blob/master/CHANGELOG.md#700-may-13-2020)
drops support for ESLint <7, but this CL updates to 7+. Other changes are
not applicable for us.

DISABLE_THIRD_PARTY_CHECK=Updating ESLint
R=petermarshall@chromium.org

Change-Id: I7760e084ef87f73a92f9ea4e075fb4c065047f5a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2534873
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>

2020-11-13 12:28:15 +00:00

2.2 KiB

Raw Blame History

dynamic imports require a leading comment with a webpackChunkName (dynamic-import-chunkname)

This rule reports any dynamic imports without a webpackChunkName specified in a leading block comment in the proper format.

This rule enforces naming of webpack chunks in dynamic imports. When you don't explicitly name chunks, webpack will autogenerate chunk names that are not consistent across builds, which prevents long-term browser caching.

Rule Details

This rule runs against import() by default, but can be configured to also run against an alternative dynamic-import function, e.g. 'dynamicImport.' You can also configure the regex format you'd like to accept for the webpackChunkName - for example, if we don't want the number 6 to show up in our chunk names:

{
 "dynamic-import-chunkname": [2, {
   importFunctions: ["dynamicImport"],
   webpackChunknameFormat: "[a-zA-Z0-57-9-/_]+"
 }]
}

invalid

The following patterns are invalid:

// no leading comment
import('someModule');

// incorrectly formatted comment
import(
  /*webpackChunkName:"someModule"*/
  'someModule',
);
import(
  /* webpackChunkName : "someModule" */
  'someModule',
);

// chunkname contains a 6 (forbidden by rule config)
import(
  /* webpackChunkName: "someModule6" */
  'someModule',
);

// invalid syntax for webpack comment
import(
  /* totally not webpackChunkName: "someModule" */
  'someModule',
);

// single-line comment, not a block-style comment
import(
  // webpackChunkName: "someModule"
  'someModule',
);

valid

The following patterns are valid:

  import(
    /* webpackChunkName: "someModule" */
    'someModule',
  );
  import(
    /* webpackChunkName: "someOtherModule12345789" */
    'someModule',
  );
  import(
    /* webpackChunkName: "someModule" */
    /* webpackPrefetch: true */
    'someModule',
  );
  import(
    /* webpackChunkName: "someModule", webpackPrefetch: true */
    'someModule',
  );

  // using single quotes instead of double quotes
  import(
    /* webpackChunkName: 'someModule' */
    'someModule',
  );

When Not To Use It

If you don't care that webpack will autogenerate chunk names and may blow up browser caches and bundle size reports.

2.2 KiB Raw Blame History