git.iko.soy/bridge
on master help sign in
Bridge v2.5.2
commitc47786ac1a48ab9e4b5c2c17a129ecb847373551 authorFang <git@fang.io> dateWed 15 Jul 2020, 15:06 (6 years ago) parentf1db829
13 files changed+1478−2
compare with master
unifiedsplit
config/env.js+93 config/jest/cssTransform.js+14 config/jest/fileTransform.js+40 config/modules.js+84 config/paths.js+90 config/pnpTs.js+35 config/webpack.config.js+628 config/webpackDevServer.config.js+104 package-lock.json+1−1 package.json+1−1 scripts/build.js+191 scripts/start.js+145 scripts/test.js+52
config/env.jsnew file+93
@@ -0,0 +1,93 @@
1+'use strict';
2+
3+const fs = require('fs');
4+const path = require('path');
5+const paths = require('./paths');
6+
7+// Make sure that including paths.js after env.js will read .env variables.
8+delete require.cache[require.resolve('./paths')];
9+
10+const NODE_ENV = process.env.NODE_ENV;
11+if (!NODE_ENV) {
12+ throw new Error(
13+ 'The NODE_ENV environment variable is required but was not specified.'
14+ );
15+}
16+
17+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18+var dotenvFiles = [
19+ `${paths.dotenv}.${NODE_ENV}.local`,
20+ `${paths.dotenv}.${NODE_ENV}`,
21+ // Don't include `.env.local` for `test` environment
22+ // since normally you expect tests to produce the same
23+ // results for everyone
24+ NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25+ paths.dotenv,
26+].filter(Boolean);
27+
28+// Load environment variables from .env* files. Suppress warnings using silent
29+// if this file is missing. dotenv will never modify any environment variables
30+// that have already been set. Variable expansion is supported in .env files.
31+// https://github.com/motdotla/dotenv
32+// https://github.com/motdotla/dotenv-expand
33+dotenvFiles.forEach(dotenvFile => {
34+ if (fs.existsSync(dotenvFile)) {
35+ require('dotenv-expand')(
36+ require('dotenv').config({
37+ path: dotenvFile,
38+ })
39+ );
40+ }
41+});
42+
43+// We support resolving modules according to `NODE_PATH`.
44+// This lets you use absolute paths in imports inside large monorepos:
45+// https://github.com/facebook/create-react-app/issues/253.
46+// It works similar to `NODE_PATH` in Node itself:
47+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51+// We also resolve them to make sure all tools using them work consistently.
52+const appDirectory = fs.realpathSync(process.cwd());
53+process.env.NODE_PATH = (process.env.NODE_PATH || '')
54+ .split(path.delimiter)
55+ .filter(folder => folder && !path.isAbsolute(folder))
56+ .map(folder => path.resolve(appDirectory, folder))
57+ .join(path.delimiter);
58+
59+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60+// injected into the application via DefinePlugin in Webpack configuration.
61+const REACT_APP = /^REACT_APP_/i;
62+
63+function getClientEnvironment(publicUrl) {
64+ const raw = Object.keys(process.env)
65+ .filter(key => REACT_APP.test(key))
66+ .reduce(
67+ (env, key) => {
68+ env[key] = process.env[key];
69+ return env;
70+ },
71+ {
72+ // Useful for determining whether we’re running in production mode.
73+ // Most importantly, it switches React into the correct mode.
74+ NODE_ENV: process.env.NODE_ENV || 'development',
75+ // Useful for resolving the correct path to static assets in `public`.
76+ // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77+ // This should only be used as an escape hatch. Normally you would put
78+ // images into the `src` and `import` them in code to get their paths.
79+ PUBLIC_URL: publicUrl,
80+ }
81+ );
82+ // Stringify all values so we can feed into Webpack DefinePlugin
83+ const stringified = {
84+ 'process.env': Object.keys(raw).reduce((env, key) => {
85+ env[key] = JSON.stringify(raw[key]);
86+ return env;
87+ }, {}),
88+ };
89+
90+ return { raw, stringified };
91+}
92+
93+module.exports = getClientEnvironment;
config/jest/cssTransform.jsnew file+14
@@ -0,0 +1,14 @@
1+'use strict';
2+
3+// This is a custom Jest transformer turning style imports into empty objects.
4+// http://facebook.github.io/jest/docs/en/webpack.html
5+
6+module.exports = {
7+ process() {
8+ return 'module.exports = {};';
9+ },
10+ getCacheKey() {
11+ // The output is always the same.
12+ return 'cssTransform';
13+ },
14+};
config/jest/fileTransform.jsnew file+40
@@ -0,0 +1,40 @@
1+'use strict';
2+
3+const path = require('path');
4+const camelcase = require('camelcase');
5+
6+// This is a custom Jest transformer turning file imports into filenames.
7+// http://facebook.github.io/jest/docs/en/webpack.html
8+
9+module.exports = {
10+ process(src, filename) {
11+ const assetFilename = JSON.stringify(path.basename(filename));
12+
13+ if (filename.match(/\.svg$/)) {
14+ // Based on how SVGR generates a component name:
15+ // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16+ const pascalCaseFileName = camelcase(path.parse(filename).name, {
17+ pascalCase: true,
18+ });
19+ const componentName = `Svg${pascalCaseFileName}`;
20+ return `const React = require('react');
21+ module.exports = {
22+ __esModule: true,
23+ default: ${assetFilename},
24+ ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25+ return {
26+ $$typeof: Symbol.for('react.element'),
27+ type: 'svg',
28+ ref: ref,
29+ key: null,
30+ props: Object.assign({}, props, {
31+ children: ${assetFilename}
32+ })
33+ };
34+ }),
35+ };`;
36+ }
37+
38+ return `module.exports = ${assetFilename};`;
39+ },
40+};
config/modules.jsnew file+84
@@ -0,0 +1,84 @@
1+'use strict';
2+
3+const fs = require('fs');
4+const path = require('path');
5+const paths = require('./paths');
6+const chalk = require('react-dev-utils/chalk');
7+
8+/**
9+ * Get the baseUrl of a compilerOptions object.
10+ *
11+ * @param {Object} options
12+ */
13+function getAdditionalModulePaths(options = {}) {
14+ const baseUrl = options.baseUrl;
15+
16+ // We need to explicitly check for null and undefined (and not a falsy value) because
17+ // TypeScript treats an empty string as `.`.
18+ if (baseUrl == null) {
19+ // If there's no baseUrl set we respect NODE_PATH
20+ // Note that NODE_PATH is deprecated and will be removed
21+ // in the next major release of create-react-app.
22+
23+ const nodePath = process.env.NODE_PATH || '';
24+ return nodePath.split(path.delimiter).filter(Boolean);
25+ }
26+
27+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
28+
29+ // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
30+ // the default behavior.
31+ if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
32+ return null;
33+ }
34+
35+ // Allow the user set the `baseUrl` to `appSrc`.
36+ if (path.relative(paths.appSrc, baseUrlResolved) === '') {
37+ return [paths.appSrc];
38+ }
39+
40+ // Otherwise, throw an error.
41+ throw new Error(
42+ chalk.red.bold(
43+ "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
44+ ' Create React App does not support other values at this time.'
45+ )
46+ );
47+}
48+
49+function getModules() {
50+ // Check if TypeScript is setup
51+ const hasTsConfig = fs.existsSync(paths.appTsConfig);
52+ const hasJsConfig = fs.existsSync(paths.appJsConfig);
53+
54+ if (hasTsConfig && hasJsConfig) {
55+ throw new Error(
56+ 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
57+ );
58+ }
59+
60+ let config;
61+
62+ // If there's a tsconfig.json we assume it's a
63+ // TypeScript project and set up the config
64+ // based on tsconfig.json
65+ if (hasTsConfig) {
66+ config = require(paths.appTsConfig);
67+ // Otherwise we'll check if there is jsconfig.json
68+ // for non TS projects.
69+ } else if (hasJsConfig) {
70+ config = require(paths.appJsConfig);
71+ }
72+
73+ config = config || {};
74+ const options = config.compilerOptions || {};
75+
76+ const additionalModulePaths = getAdditionalModulePaths(options);
77+
78+ return {
79+ additionalModulePaths: additionalModulePaths,
80+ hasTsConfig,
81+ };
82+}
83+
84+module.exports = getModules();
config/paths.jsnew file+90
@@ -0,0 +1,90 @@
1+'use strict';
2+
3+const path = require('path');
4+const fs = require('fs');
5+const url = require('url');
6+
7+// Make sure any symlinks in the project folder are resolved:
8+// https://github.com/facebook/create-react-app/issues/637
9+const appDirectory = fs.realpathSync(process.cwd());
10+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11+
12+const envPublicUrl = process.env.PUBLIC_URL;
13+
14+function ensureSlash(inputPath, needsSlash) {
15+ const hasSlash = inputPath.endsWith('/');
16+ if (hasSlash && !needsSlash) {
17+ return inputPath.substr(0, inputPath.length - 1);
18+ } else if (!hasSlash && needsSlash) {
19+ return `${inputPath}/`;
20+ } else {
21+ return inputPath;
22+ }
23+}
24+
25+const getPublicUrl = appPackageJson =>
26+ envPublicUrl || require(appPackageJson).homepage;
27+
28+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
29+// "public path" at which the app is served.
30+// Webpack needs to know it to put the right <script> hrefs into HTML even in
31+// single-page apps that may serve index.html for nested URLs like /todos/42.
32+// We can't use a relative path in HTML because we don't want to load something
33+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34+function getServedPath(appPackageJson) {
35+ const publicUrl = getPublicUrl(appPackageJson);
36+ const servedUrl =
37+ envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38+ return ensureSlash(servedUrl, true);
39+}
40+
41+const moduleFileExtensions = [
42+ 'web.mjs',
43+ 'mjs',
44+ 'web.js',
45+ 'js',
46+ 'web.ts',
47+ 'ts',
48+ 'web.tsx',
49+ 'tsx',
50+ 'json',
51+ 'web.jsx',
52+ 'jsx',
53+];
54+
55+// Resolve file paths in the same order as webpack
56+const resolveModule = (resolveFn, filePath) => {
57+ const extension = moduleFileExtensions.find(extension =>
58+ fs.existsSync(resolveFn(`${filePath}.${extension}`))
59+ );
60+
61+ if (extension) {
62+ return resolveFn(`${filePath}.${extension}`);
63+ }
64+
65+ return resolveFn(`${filePath}.js`);
66+};
67+
68+// config after eject: we're in ./config/
69+module.exports = {
70+ dotenv: resolveApp('.env'),
71+ appPath: resolveApp('.'),
72+ appBuild: resolveApp('build'),
73+ appPublic: resolveApp('public'),
74+ appHtml: resolveApp('public/index.html'),
75+ appIndexJs: resolveModule(resolveApp, 'src/index'),
76+ appPackageJson: resolveApp('package.json'),
77+ appSrc: resolveApp('src'),
78+ appTsConfig: resolveApp('tsconfig.json'),
79+ appJsConfig: resolveApp('jsconfig.json'),
80+ yarnLockFile: resolveApp('yarn.lock'),
81+ testsSetup: resolveModule(resolveApp, 'src/setupTests'),
82+ proxySetup: resolveApp('src/setupProxy.js'),
83+ appNodeModules: resolveApp('node_modules'),
84+ publicUrl: getPublicUrl(resolveApp('package.json')),
85+ servedPath: getServedPath(resolveApp('package.json')),
86+};
87+
88+
89+
90+module.exports.moduleFileExtensions = moduleFileExtensions;
config/pnpTs.jsnew file+35
@@ -0,0 +1,35 @@
1+'use strict';
2+
3+const { resolveModuleName } = require('ts-pnp');
4+
5+exports.resolveModuleName = (
6+ typescript,
7+ moduleName,
8+ containingFile,
9+ compilerOptions,
10+ resolutionHost
11+) => {
12+ return resolveModuleName(
13+ moduleName,
14+ containingFile,
15+ compilerOptions,
16+ resolutionHost,
17+ typescript.resolveModuleName
18+ );
19+};
20+
21+exports.resolveTypeReferenceDirective = (
22+ typescript,
23+ moduleName,
24+ containingFile,
25+ compilerOptions,
26+ resolutionHost
27+) => {
28+ return resolveModuleName(
29+ moduleName,
30+ containingFile,
31+ compilerOptions,
32+ resolutionHost,
33+ typescript.resolveTypeReferenceDirective
34+ );
35+};
config/webpack.config.jsnew file+628
@@ -0,0 +1,628 @@
1+'use strict';
2+
3+const fs = require('fs');
4+const isWsl = require('is-wsl');
5+const path = require('path');
6+const webpack = require('webpack');
7+const resolve = require('resolve');
8+const PnpWebpackPlugin = require('pnp-webpack-plugin');
9+const HtmlWebpackPlugin = require('html-webpack-plugin');
10+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
11+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
12+const TerserPlugin = require('terser-webpack-plugin');
13+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
14+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
15+const safePostCssParser = require('postcss-safe-parser');
16+const ManifestPlugin = require('webpack-manifest-plugin');
17+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
18+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
19+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
20+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
21+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
22+const paths = require('./paths');
23+const modules = require('./modules');
24+const getClientEnvironment = require('./env');
25+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
26+const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
27+const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
28+
29+const postcssNormalize = require('postcss-normalize');
30+
31+// Source maps are resource heavy and can cause out of memory issue for large source files.
32+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
33+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
34+// makes for a smoother build process.
35+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
36+
37+// Check if TypeScript is setup
38+const useTypeScript = fs.existsSync(paths.appTsConfig);
39+
40+// style files regexes
41+const cssRegex = /\.css$/;
42+const cssModuleRegex = /\.module\.css$/;
43+const sassRegex = /\.(scss|sass)$/;
44+const sassModuleRegex = /\.module\.(scss|sass)$/;
45+
46+// This is the production and development configuration.
47+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
48+module.exports = function(webpackEnv) {
49+ const isEnvDevelopment = webpackEnv === 'development';
50+ const isEnvProduction = webpackEnv === 'production';
51+
52+ // Webpack uses `publicPath` to determine where the app is being served from.
53+ // It requires a trailing slash, or the file assets will get an incorrect path.
54+ // In development, we always serve from the root. This makes config easier.
55+ const publicPath = isEnvProduction
56+ ? paths.servedPath
57+ : isEnvDevelopment && '/';
58+ // Some apps do not use client-side routing with pushState.
59+ // For these, "homepage" can be set to "." to enable relative asset paths.
60+ const shouldUseRelativeAssetPaths = publicPath === './';
61+
62+ // `publicUrl` is just like `publicPath`, but we will provide it to our app
63+ // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
64+ // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
65+ const publicUrl = isEnvProduction
66+ ? publicPath.slice(0, -1)
67+ : isEnvDevelopment && '';
68+ // Get environment variables to inject into our app.
69+ const env = getClientEnvironment(publicUrl);
70+
71+ // common function to get style loaders
72+ const getStyleLoaders = (cssOptions, preProcessor) => {
73+ const loaders = [
74+ isEnvDevelopment && require.resolve('style-loader'),
75+ isEnvProduction && {
76+ loader: MiniCssExtractPlugin.loader,
77+ options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
78+ },
79+ {
80+ loader: require.resolve('css-loader'),
81+ options: cssOptions,
82+ },
83+ {
84+ // Options for PostCSS as we reference these options twice
85+ // Adds vendor prefixing based on your specified browser support in
86+ // package.json
87+ loader: require.resolve('postcss-loader'),
88+ options: {
89+ // Necessary for external CSS imports to work
90+ // https://github.com/facebook/create-react-app/issues/2677
91+ ident: 'postcss',
92+ plugins: () => [
93+ require('postcss-flexbugs-fixes'),
94+ require('postcss-preset-env')({
95+ autoprefixer: {
96+ flexbox: 'no-2009',
97+ },
98+ stage: 3,
99+ }),
100+ // Adds PostCSS Normalize as the reset css with default options,
101+ // so that it honors browserslist config in package.json
102+ // which in turn let's users customize the target behavior as per their needs.
103+ postcssNormalize(),
104+ ],
105+ sourceMap: isEnvProduction && shouldUseSourceMap,
106+ },
107+ },
108+ ].filter(Boolean);
109+ if (preProcessor) {
110+ loaders.push({
111+ loader: require.resolve(preProcessor),
112+ options: {
113+ sourceMap: isEnvProduction && shouldUseSourceMap,
114+ },
115+ });
116+ }
117+ return loaders;
118+ };
119+
120+ return {
121+ mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
122+ // Stop compilation early in production
123+ bail: isEnvProduction,
124+ devtool: isEnvProduction
125+ ? shouldUseSourceMap
126+ ? 'source-map'
127+ : false
128+ : isEnvDevelopment && 'cheap-module-source-map',
129+ // These are the "entry points" to our application.
130+ // This means they will be the "root" imports that are included in JS bundle.
131+ entry: [
132+ // Include an alternative client for WebpackDevServer. A client's job is to
133+ // connect to WebpackDevServer by a socket and get notified about changes.
134+ // When you save a file, the client will either apply hot updates (in case
135+ // of CSS changes), or refresh the page (in case of JS changes). When you
136+ // make a syntax error, this client will display a syntax error overlay.
137+ // Note: instead of the default WebpackDevServer client, we use a custom one
138+ // to bring better experience for Create React App users. You can replace
139+ // the line below with these two lines if you prefer the stock client:
140+ // require.resolve('webpack-dev-server/client') + '?/',
141+ // require.resolve('webpack/hot/dev-server'),
142+ isEnvDevelopment &&
143+ require.resolve('react-dev-utils/webpackHotDevClient'),
144+ // Finally, this is your app's code:
145+ paths.appIndexJs,
146+ // We include the app code last so that if there is a runtime error during
147+ // initialization, it doesn't blow up the WebpackDevServer client, and
148+ // changing JS code would still trigger a refresh.
149+ ].filter(Boolean),
150+ output: {
151+ // The build folder.
152+ path: isEnvProduction ? paths.appBuild : undefined,
153+ // Add /* filename */ comments to generated require()s in the output.
154+ pathinfo: isEnvDevelopment,
155+ // There will be one main bundle, and one file per asynchronous chunk.
156+ // In development, it does not produce real files.
157+ filename: isEnvProduction
158+ ? 'static/js/[name].[contenthash:8].js'
159+ : isEnvDevelopment && 'static/js/bundle.js',
160+ // TODO: remove this when upgrading to webpack 5
161+ futureEmitAssets: true,
162+ // There are also additional JS chunk files if you use code splitting.
163+ chunkFilename: isEnvProduction
164+ ? 'static/js/[name].[contenthash:8].chunk.js'
165+ : isEnvDevelopment && 'static/js/[name].chunk.js',
166+ // We inferred the "public path" (such as / or /my-project) from homepage.
167+ // We use "/" in development.
168+ publicPath: publicPath,
169+ // Point sourcemap entries to original disk location (format as URL on Windows)
170+ devtoolModuleFilenameTemplate: isEnvProduction
171+ ? info =>
172+ path
173+ .relative(paths.appSrc, info.absoluteResourcePath)
174+ .replace(/\\/g, '/')
175+ : isEnvDevelopment &&
176+ (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
177+ },
178+ optimization: {
179+ minimize: isEnvProduction,
180+ minimizer: [
181+ // This is only used in production mode
182+ new TerserPlugin({
183+ terserOptions: {
184+ parse: {
185+ // we want terser to parse ecma 8 code. However, we don't want it
186+ // to apply any minfication steps that turns valid ecma 5 code
187+ // into invalid ecma 5 code. This is why the 'compress' and 'output'
188+ // sections only apply transformations that are ecma 5 safe
189+ // https://github.com/facebook/create-react-app/pull/4234
190+ ecma: 8,
191+ },
192+ compress: {
193+ ecma: 5,
194+ warnings: false,
195+ // Disabled because of an issue with Uglify breaking seemingly valid code:
196+ // https://github.com/facebook/create-react-app/issues/2376
197+ // Pending further investigation:
198+ // https://github.com/mishoo/UglifyJS2/issues/2011
199+ comparisons: false,
200+ // Disabled because of an issue with Terser breaking valid code:
201+ // https://github.com/facebook/create-react-app/issues/5250
202+ // Pending futher investigation:
203+ // https://github.com/terser-js/terser/issues/120
204+ inline: 2,
205+ },
206+ mangle: {
207+ safari10: true,
208+ },
209+ output: {
210+ ecma: 5,
211+ comments: false,
212+ // Turned on because emoji and regex is not minified properly using default
213+ // https://github.com/facebook/create-react-app/issues/2488
214+ ascii_only: true,
215+ },
216+ },
217+ // Use multi-process parallel running to improve the build speed
218+ // Default number of concurrent runs: os.cpus().length - 1
219+ // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
220+ // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
221+ parallel: !isWsl,
222+ // Enable file caching
223+ cache: true,
224+ sourceMap: shouldUseSourceMap,
225+ }),
226+ // This is only used in production mode
227+ new OptimizeCSSAssetsPlugin({
228+ cssProcessorOptions: {
229+ parser: safePostCssParser,
230+ map: shouldUseSourceMap
231+ ? {
232+ // `inline: false` forces the sourcemap to be output into a
233+ // separate file
234+ inline: false,
235+ // `annotation: true` appends the sourceMappingURL to the end of
236+ // the css file, helping the browser find the sourcemap
237+ annotation: true,
238+ }
239+ : false,
240+ },
241+ }),
242+ ],
243+ // Automatically split vendor and commons
244+ // https://twitter.com/wSokra/status/969633336732905474
245+ // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
246+ splitChunks: {
247+ chunks: 'all',
248+ name: false,
249+ },
250+ // Keep the runtime chunk separated to enable long term caching
251+ // https://twitter.com/wSokra/status/969679223278505985
252+ runtimeChunk: true,
253+ },
254+ resolve: {
255+ // This allows you to set a fallback for where Webpack should look for modules.
256+ // We placed these paths second because we want `node_modules` to "win"
257+ // if there are any conflicts. This matches Node resolution mechanism.
258+ // https://github.com/facebook/create-react-app/issues/253
259+ modules: ['node_modules', paths.appNodeModules].concat(
260+ modules.additionalModulePaths || []
261+ ),
262+ // These are the reasonable defaults supported by the Node ecosystem.
263+ // We also include JSX as a common component filename extension to support
264+ // some tools, although we do not recommend using it, see:
265+ // https://github.com/facebook/create-react-app/issues/290
266+ // `web` extension prefixes have been added for better support
267+ // for React Native Web.
268+ extensions: paths.moduleFileExtensions
269+ .map(ext => `.${ext}`)
270+ .filter(ext => useTypeScript || !ext.includes('ts')),
271+ alias: {
272+ // Support React Native Web
273+ // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
274+ 'react-native': 'react-native-web',
275+ },
276+ plugins: [
277+ // Adds support for installing with Plug'n'Play, leading to faster installs and adding
278+ // guards against forgotten dependencies and such.
279+ PnpWebpackPlugin,
280+ // Prevents users from importing files from outside of src/ (or node_modules/).
281+ // This often causes confusion because we only process files within src/ with babel.
282+ // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
283+ // please link the files into your node_modules/ and let module-resolution kick in.
284+ // Make sure your source files are compiled, as they will not be processed in any way.
285+ new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
286+ ],
287+ },
288+ resolveLoader: {
289+ plugins: [
290+ // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
291+ // from the current package.
292+ PnpWebpackPlugin.moduleLoader(module),
293+ ],
294+ },
295+ module: {
296+ strictExportPresence: true,
297+ rules: [
298+ // Disable require.ensure as it's not a standard language feature.
299+ { parser: { requireEnsure: false } },
300+
301+ // First, run the linter.
302+ // It's important to do this before Babel processes the JS.
303+ {
304+ test: /\.(js|mjs|jsx|ts|tsx)$/,
305+ enforce: 'pre',
306+ use: [
307+ {
308+ options: {
309+ formatter: require.resolve('react-dev-utils/eslintFormatter'),
310+ eslintPath: require.resolve('eslint'),
311+
312+ },
313+ loader: require.resolve('eslint-loader'),
314+ },
315+ ],
316+ include: paths.appSrc,
317+ },
318+ {
319+ // "oneOf" will traverse all following loaders until one will
320+ // match the requirements. When no loader matches it will fall
321+ // back to the "file" loader at the end of the loader list.
322+ oneOf: [
323+ // "url" loader works like "file" loader except that it embeds assets
324+ // smaller than specified limit in bytes as data URLs to avoid requests.
325+ // A missing `test` is equivalent to a match.
326+ {
327+ test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
328+ loader: require.resolve('url-loader'),
329+ options: {
330+ limit: 10000,
331+ name: 'static/media/[name].[hash:8].[ext]',
332+ },
333+ },
334+ // Process application JS with Babel.
335+ // The preset includes JSX, Flow, TypeScript, and some ESnext features.
336+ {
337+ test: /\.(js|mjs|jsx|ts|tsx)$/,
338+ include: paths.appSrc,
339+ loader: require.resolve('babel-loader'),
340+ options: {
341+ customize: require.resolve(
342+ 'babel-preset-react-app/webpack-overrides'
343+ ),
344+
345+ plugins: [
346+ [
347+ require.resolve('babel-plugin-named-asset-import'),
348+ {
349+ loaderMap: {
350+ svg: {
351+ ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
352+ },
353+ },
354+ },
355+ ],
356+ ],
357+ // This is a feature of `babel-loader` for webpack (not Babel itself).
358+ // It enables caching results in ./node_modules/.cache/babel-loader/
359+ // directory for faster rebuilds.
360+ cacheDirectory: true,
361+ cacheCompression: isEnvProduction,
362+ compact: isEnvProduction,
363+ },
364+ },
365+ // Process any JS outside of the app with Babel.
366+ // Unlike the application JS, we only compile the standard ES features.
367+ {
368+ test: /\.(js|mjs)$/,
369+ exclude: /@babel(?:\/|\\{1,2})runtime/,
370+ loader: require.resolve('babel-loader'),
371+ options: {
372+ babelrc: false,
373+ configFile: false,
374+ compact: false,
375+ presets: [
376+ [
377+ require.resolve('babel-preset-react-app/dependencies'),
378+ { helpers: true },
379+ ],
380+ ],
381+ cacheDirectory: true,
382+ cacheCompression: isEnvProduction,
383+
384+ // If an error happens in a package, it's possible to be
385+ // because it was compiled. Thus, we don't want the browser
386+ // debugger to show the original code. Instead, the code
387+ // being evaluated would be much more helpful.
388+ sourceMaps: false,
389+ },
390+ },
391+ // "postcss" loader applies autoprefixer to our CSS.
392+ // "css" loader resolves paths in CSS and adds assets as dependencies.
393+ // "style" loader turns CSS into JS modules that inject <style> tags.
394+ // In production, we use MiniCSSExtractPlugin to extract that CSS
395+ // to a file, but in development "style" loader enables hot editing
396+ // of CSS.
397+ // By default we support CSS Modules with the extension .module.css
398+ {
399+ test: cssRegex,
400+ exclude: cssModuleRegex,
401+ use: getStyleLoaders({
402+ importLoaders: 1,
403+ sourceMap: isEnvProduction && shouldUseSourceMap,
404+ }),
405+ // Don't consider CSS imports dead code even if the
406+ // containing package claims to have no side effects.
407+ // Remove this when webpack adds a warning or an error for this.
408+ // See https://github.com/webpack/webpack/issues/6571
409+ sideEffects: true,
410+ },
411+ // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
412+ // using the extension .module.css
413+ {
414+ test: cssModuleRegex,
415+ use: getStyleLoaders({
416+ importLoaders: 1,
417+ sourceMap: isEnvProduction && shouldUseSourceMap,
418+ modules: true,
419+ getLocalIdent: getCSSModuleLocalIdent,
420+ }),
421+ },
422+ // Opt-in support for SASS (using .scss or .sass extensions).
423+ // By default we support SASS Modules with the
424+ // extensions .module.scss or .module.sass
425+ {
426+ test: sassRegex,
427+ exclude: sassModuleRegex,
428+ use: getStyleLoaders(
429+ {
430+ importLoaders: 2,
431+ sourceMap: isEnvProduction && shouldUseSourceMap,
432+ },
433+ 'sass-loader'
434+ ),
435+ // Don't consider CSS imports dead code even if the
436+ // containing package claims to have no side effects.
437+ // Remove this when webpack adds a warning or an error for this.
438+ // See https://github.com/webpack/webpack/issues/6571
439+ sideEffects: true,
440+ },
441+ // Adds support for CSS Modules, but using SASS
442+ // using the extension .module.scss or .module.sass
443+ {
444+ test: sassModuleRegex,
445+ use: getStyleLoaders(
446+ {
447+ importLoaders: 2,
448+ sourceMap: isEnvProduction && shouldUseSourceMap,
449+ modules: true,
450+ getLocalIdent: getCSSModuleLocalIdent,
451+ },
452+ 'sass-loader'
453+ ),
454+ },
455+ // "file" loader makes sure those assets get served by WebpackDevServer.
456+ // When you `import` an asset, you get its (virtual) filename.
457+ // In production, they would get copied to the `build` folder.
458+ // This loader doesn't use a "test" so it will catch all modules
459+ // that fall through the other loaders.
460+ {
461+ loader: require.resolve('file-loader'),
462+ // Exclude `js` files to keep "css" loader working as it injects
463+ // its runtime that would otherwise be processed through "file" loader.
464+ // Also exclude `html` and `json` extensions so they get processed
465+ // by webpacks internal loaders.
466+ exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
467+ options: {
468+ name: 'static/media/[name].[hash:8].[ext]',
469+ },
470+ },
471+ // ** STOP ** Are you adding a new loader?
472+ // Make sure to add the new loader(s) before the "file" loader.
473+ ],
474+ },
475+ ],
476+ },
477+ plugins: [
478+ // Generates an `index.html` file with the <script> injected.
479+ new HtmlWebpackPlugin(
480+ Object.assign(
481+ {},
482+ {
483+ inject: true,
484+ template: paths.appHtml,
485+ },
486+ isEnvProduction
487+ ? {
488+ minify: {
489+ removeComments: true,
490+ collapseWhitespace: true,
491+ removeRedundantAttributes: true,
492+ useShortDoctype: true,
493+ removeEmptyAttributes: true,
494+ removeStyleLinkTypeAttributes: true,
495+ keepClosingSlash: true,
496+ minifyJS: true,
497+ minifyCSS: true,
498+ minifyURLs: true,
499+ },
500+ }
501+ : undefined
502+ )
503+ ),
504+ // Inlines the webpack runtime script. This script is too small to warrant
505+ // a network request.
506+ isEnvProduction &&
507+ shouldInlineRuntimeChunk &&
508+ new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
509+ // Makes some environment variables available in index.html.
510+ // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
511+ // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
512+ // In production, it will be an empty string unless you specify "homepage"
513+ // in `package.json`, in which case it will be the pathname of that URL.
514+ // In development, this will be an empty string.
515+ new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
516+ // This gives some necessary context to module not found errors, such as
517+ // the requesting resource.
518+ new ModuleNotFoundPlugin(paths.appPath),
519+ // Makes some environment variables available to the JS code, for example:
520+ // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
521+ // It is absolutely essential that NODE_ENV is set to production
522+ // during a production build.
523+ // Otherwise React will be compiled in the very slow development mode.
524+ new webpack.DefinePlugin(env.stringified),
525+ // This is necessary to emit hot updates (currently CSS only):
526+ isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
527+ // Watcher doesn't work well if you mistype casing in a path so we use
528+ // a plugin that prints an error when you attempt to do this.
529+ // See https://github.com/facebook/create-react-app/issues/240
530+ isEnvDevelopment && new CaseSensitivePathsPlugin(),
531+ // If you require a missing module and then `npm install` it, you still have
532+ // to restart the development server for Webpack to discover it. This plugin
533+ // makes the discovery automatic so you don't have to restart.
534+ // See https://github.com/facebook/create-react-app/issues/186
535+ isEnvDevelopment &&
536+ new WatchMissingNodeModulesPlugin(paths.appNodeModules),
537+ isEnvProduction &&
538+ new MiniCssExtractPlugin({
539+ // Options similar to the same options in webpackOptions.output
540+ // both options are optional
541+ filename: 'static/css/[name].[contenthash:8].css',
542+ chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
543+ }),
544+ // Generate a manifest file which contains a mapping of all asset filenames
545+ // to their corresponding output file so that tools can pick it up without
546+ // having to parse `index.html`.
547+ new ManifestPlugin({
548+ fileName: 'asset-manifest.json',
549+ publicPath: publicPath,
550+ generate: (seed, files) => {
551+ const manifestFiles = files.reduce(function(manifest, file) {
552+ manifest[file.name] = file.path;
553+ return manifest;
554+ }, seed);
555+
556+ return {
557+ files: manifestFiles,
558+ };
559+ },
560+ }),
561+ // Moment.js is an extremely popular library that bundles large locale files
562+ // by default due to how Webpack interprets its code. This is a practical
563+ // solution that requires the user to opt into importing specific locales.
564+ // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
565+ // You can remove this if you don't use Moment.js:
566+ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
567+ // Generate a service worker script that will precache, and keep up to date,
568+ // the HTML & assets that are part of the Webpack build.
569+ isEnvProduction &&
570+ new WorkboxWebpackPlugin.GenerateSW({
571+ clientsClaim: true,
572+ exclude: [/\.map$/, /asset-manifest\.json$/],
573+ importWorkboxFrom: 'cdn',
574+ navigateFallback: publicUrl + '/index.html',
575+ navigateFallbackBlacklist: [
576+ // Exclude URLs starting with /_, as they're likely an API call
577+ new RegExp('^/_'),
578+ // Exclude URLs containing a dot, as they're likely a resource in
579+ // public/ and not a SPA route
580+ new RegExp('/[^/]+\\.[^/]+$'),
581+ ],
582+ }),
583+ // TypeScript type checking
584+ useTypeScript &&
585+ new ForkTsCheckerWebpackPlugin({
586+ typescript: resolve.sync('typescript', {
587+ basedir: paths.appNodeModules,
588+ }),
589+ async: isEnvDevelopment,
590+ useTypescriptIncrementalApi: true,
591+ checkSyntacticErrors: true,
592+ resolveModuleNameModule: process.versions.pnp
593+ ? `${__dirname}/pnpTs.js`
594+ : undefined,
595+ resolveTypeReferenceDirectiveModule: process.versions.pnp
596+ ? `${__dirname}/pnpTs.js`
597+ : undefined,
598+ tsconfig: paths.appTsConfig,
599+ reportFiles: [
600+ '**',
601+ '!**/__tests__/**',
602+ '!**/?(*.)(spec|test).*',
603+ '!**/src/setupProxy.*',
604+ '!**/src/setupTests.*',
605+ ],
606+ watch: paths.appSrc,
607+ silent: true,
608+ // The formatter is invoked directly in WebpackDevServerUtils during development
609+ formatter: isEnvProduction ? typescriptFormatter : undefined,
610+ }),
611+ ].filter(Boolean),
612+ // Some libraries import Node modules but don't use them in the browser.
613+ // Tell Webpack to provide empty mocks for them so importing them works.
614+ node: {
615+ module: 'empty',
616+ dgram: 'empty',
617+ dns: 'mock',
618+ fs: 'empty',
619+ http2: 'empty',
620+ net: 'empty',
621+ tls: 'empty',
622+ child_process: 'empty',
623+ },
624+ // Turn off performance processing because we utilize
625+ // our own hints via the FileSizeReporter
626+ performance: false,
627+ };
628+};
config/webpackDevServer.config.jsnew file+104
@@ -0,0 +1,104 @@
1+'use strict';
2+
3+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
4+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
5+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
6+const ignoredFiles = require('react-dev-utils/ignoredFiles');
7+const paths = require('./paths');
8+const fs = require('fs');
9+
10+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
11+const host = process.env.HOST || '0.0.0.0';
12+
13+module.exports = function(proxy, allowedHost) {
14+ return {
15+ // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
16+ // websites from potentially accessing local content through DNS rebinding:
17+ // https://github.com/webpack/webpack-dev-server/issues/887
18+ // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
19+ // However, it made several existing use cases such as development in cloud
20+ // environment or subdomains in development significantly more complicated:
21+ // https://github.com/facebook/create-react-app/issues/2271
22+ // https://github.com/facebook/create-react-app/issues/2233
23+ // While we're investigating better solutions, for now we will take a
24+ // compromise. Since our WDS configuration only serves files in the `public`
25+ // folder we won't consider accessing them a vulnerability. However, if you
26+ // use the `proxy` feature, it gets more dangerous because it can expose
27+ // remote code execution vulnerabilities in backends like Django and Rails.
28+ // So we will disable the host check normally, but enable it if you have
29+ // specified the `proxy` setting. Finally, we let you override it if you
30+ // really know what you're doing with a special environment variable.
31+ disableHostCheck:
32+ !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
33+ // Enable gzip compression of generated files.
34+ compress: true,
35+ // Silence WebpackDevServer's own logs since they're generally not useful.
36+ // It will still show compile warnings and errors with this setting.
37+ clientLogLevel: 'none',
38+ // By default WebpackDevServer serves physical files from current directory
39+ // in addition to all the virtual build products that it serves from memory.
40+ // This is confusing because those files won’t automatically be available in
41+ // production build folder unless we copy them. However, copying the whole
42+ // project directory is dangerous because we may expose sensitive files.
43+ // Instead, we establish a convention that only files in `public` directory
44+ // get served. Our build script will copy `public` into the `build` folder.
45+ // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
46+ // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
47+ // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
48+ // Note that we only recommend to use `public` folder as an escape hatch
49+ // for files like `favicon.ico`, `manifest.json`, and libraries that are
50+ // for some reason broken when imported through Webpack. If you just want to
51+ // use an image, put it in `src` and `import` it from JavaScript instead.
52+ contentBase: paths.appPublic,
53+ // By default files from `contentBase` will not trigger a page reload.
54+ watchContentBase: true,
55+ // Enable hot reloading server. It will provide /sockjs-node/ endpoint
56+ // for the WebpackDevServer client so it can learn when the files were
57+ // updated. The WebpackDevServer client is included as an entry point
58+ // in the Webpack development configuration. Note that only changes
59+ // to CSS are currently hot reloaded. JS changes will refresh the browser.
60+ hot: true,
61+ // It is important to tell WebpackDevServer to use the same "root" path
62+ // as we specified in the config. In development, we always serve from /.
63+ publicPath: '/',
64+ // WebpackDevServer is noisy by default so we emit custom message instead
65+ // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
66+ quiet: true,
67+ // Reportedly, this avoids CPU overload on some systems.
68+ // https://github.com/facebook/create-react-app/issues/293
69+ // src/node_modules is not ignored to support absolute imports
70+ // https://github.com/facebook/create-react-app/issues/1065
71+ watchOptions: {
72+ ignored: ignoredFiles(paths.appSrc),
73+ },
74+ // Enable HTTPS if the HTTPS environment variable is set to 'true'
75+ https: protocol === 'https',
76+ host,
77+ overlay: false,
78+ historyApiFallback: {
79+ // Paths with dots should still use the history fallback.
80+ // See https://github.com/facebook/create-react-app/issues/387.
81+ disableDotRule: true,
82+ },
83+ public: allowedHost,
84+ proxy,
85+ before(app, server) {
86+ if (fs.existsSync(paths.proxySetup)) {
87+ // This registers user provided middleware for proxy reasons
88+ require(paths.proxySetup)(app);
89+ }
90+
91+ // This lets us fetch source contents from webpack for the error overlay
92+ app.use(evalSourceMapMiddleware(server));
93+ // This lets us open files from the runtime error overlay.
94+ app.use(errorOverlayMiddleware());
95+
96+ // This service worker file is effectively a 'no-op' that will reset any
97+ // previous service worker registered for the same host:port combination.
98+ // We do this in development to avoid hitting the production cache if
99+ // it used the same host and port.
100+ // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101+ app.use(noopServiceWorkerMiddleware());
102+ },
103+ };
104+};
package-lock.json+1−1
@@ -1,6 +1,6 @@
11{
22 "name": "bridge",
3− "version": "2.5.1",
3+ "version": "2.5.2",
44 "lockfileVersion": 1,
55 "requires": true,
66 "dependencies": {
package.json+1−1
@@ -1,6 +1,6 @@
11{
22 "name": "bridge",
3− "version": "2.5.1",
3+ "version": "2.5.2",
44 "description": "An application for interacting with Azimuth",
55 "repository": {
66 "type": "git",
scripts/build.jsnew file+191
@@ -0,0 +1,191 @@
1+'use strict';
2+
3+// Do this as the first thing so that any code reading it knows the right env.
4+process.env.BABEL_ENV = 'production';
5+process.env.NODE_ENV = 'production';
6+
7+// Makes the script crash on unhandled rejections instead of silently
8+// ignoring them. In the future, promise rejections that are not handled will
9+// terminate the Node.js process with a non-zero exit code.
10+process.on('unhandledRejection', err => {
11+ throw err;
12+});
13+
14+// Ensure environment variables are read.
15+require('../config/env');
16+
17+
18+const path = require('path');
19+const chalk = require('react-dev-utils/chalk');
20+const fs = require('fs-extra');
21+const webpack = require('webpack');
22+const configFactory = require('../config/webpack.config');
23+const paths = require('../config/paths');
24+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
25+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
26+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
27+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
28+const printBuildError = require('react-dev-utils/printBuildError');
29+
30+const measureFileSizesBeforeBuild =
31+ FileSizeReporter.measureFileSizesBeforeBuild;
32+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
33+const useYarn = fs.existsSync(paths.yarnLockFile);
34+
35+// These sizes are pretty large. We'll warn for bundles exceeding them.
36+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
37+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
38+
39+const isInteractive = process.stdout.isTTY;
40+
41+// Warn and crash if required files are missing
42+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
43+ process.exit(1);
44+}
45+
46+// Generate configuration
47+const config = configFactory('production');
48+
49+// We require that you explicitly set browsers and do not fall back to
50+// browserslist defaults.
51+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
52+checkBrowsers(paths.appPath, isInteractive)
53+ .then(() => {
54+ // First, read the current file sizes in build directory.
55+ // This lets us display how much they changed later.
56+ return measureFileSizesBeforeBuild(paths.appBuild);
57+ })
58+ .then(previousFileSizes => {
59+ // Remove all content but keep the directory so that
60+ // if you're in it, you don't end up in Trash
61+ fs.emptyDirSync(paths.appBuild);
62+ // Merge with the public folder
63+ copyPublicFolder();
64+ // Start the webpack build
65+ return build(previousFileSizes);
66+ })
67+ .then(
68+ ({ stats, previousFileSizes, warnings }) => {
69+ if (warnings.length) {
70+ console.log(chalk.yellow('Compiled with warnings.\n'));
71+ console.log(warnings.join('\n\n'));
72+ console.log(
73+ '\nSearch for the ' +
74+ chalk.underline(chalk.yellow('keywords')) +
75+ ' to learn more about each warning.'
76+ );
77+ console.log(
78+ 'To ignore, add ' +
79+ chalk.cyan('// eslint-disable-next-line') +
80+ ' to the line before.\n'
81+ );
82+ } else {
83+ console.log(chalk.green('Compiled successfully.\n'));
84+ }
85+
86+ console.log('File sizes after gzip:\n');
87+ printFileSizesAfterBuild(
88+ stats,
89+ previousFileSizes,
90+ paths.appBuild,
91+ WARN_AFTER_BUNDLE_GZIP_SIZE,
92+ WARN_AFTER_CHUNK_GZIP_SIZE
93+ );
94+ console.log();
95+
96+ const appPackage = require(paths.appPackageJson);
97+ const publicUrl = paths.publicUrl;
98+ const publicPath = config.output.publicPath;
99+ const buildFolder = path.relative(process.cwd(), paths.appBuild);
100+ printHostingInstructions(
101+ appPackage,
102+ publicUrl,
103+ publicPath,
104+ buildFolder,
105+ useYarn
106+ );
107+ },
108+ err => {
109+ console.log(chalk.red('Failed to compile.\n'));
110+ printBuildError(err);
111+ process.exit(1);
112+ }
113+ )
114+ .catch(err => {
115+ if (err && err.message) {
116+ console.log(err.message);
117+ }
118+ process.exit(1);
119+ });
120+
121+// Create the production build and print the deployment instructions.
122+function build(previousFileSizes) {
123+ // We used to support resolving modules according to `NODE_PATH`.
124+ // This now has been deprecated in favor of jsconfig/tsconfig.json
125+ // This lets you use absolute paths in imports inside large monorepos:
126+ if (process.env.NODE_PATH) {
127+ console.log(
128+ chalk.yellow(
129+ 'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
130+ )
131+ );
132+ console.log();
133+ }
134+
135+ console.log('Creating an optimized production build...');
136+
137+ const compiler = webpack(config);
138+ return new Promise((resolve, reject) => {
139+ compiler.run((err, stats) => {
140+ let messages;
141+ if (err) {
142+ if (!err.message) {
143+ return reject(err);
144+ }
145+ messages = formatWebpackMessages({
146+ errors: [err.message],
147+ warnings: [],
148+ });
149+ } else {
150+ messages = formatWebpackMessages(
151+ stats.toJson({ all: false, warnings: true, errors: true })
152+ );
153+ }
154+ if (messages.errors.length) {
155+ // Only keep the first error. Others are often indicative
156+ // of the same problem, but confuse the reader with noise.
157+ if (messages.errors.length > 1) {
158+ messages.errors.length = 1;
159+ }
160+ return reject(new Error(messages.errors.join('\n\n')));
161+ }
162+ if (
163+ process.env.CI &&
164+ (typeof process.env.CI !== 'string' ||
165+ process.env.CI.toLowerCase() !== 'false') &&
166+ messages.warnings.length
167+ ) {
168+ console.log(
169+ chalk.yellow(
170+ '\nTreating warnings as errors because process.env.CI = true.\n' +
171+ 'Most CI servers set it automatically.\n'
172+ )
173+ );
174+ return reject(new Error(messages.warnings.join('\n\n')));
175+ }
176+
177+ return resolve({
178+ stats,
179+ previousFileSizes,
180+ warnings: messages.warnings,
181+ });
182+ });
183+ });
184+}
185+
186+function copyPublicFolder() {
187+ fs.copySync(paths.appPublic, paths.appBuild, {
188+ dereference: true,
189+ filter: file => file !== paths.appHtml,
190+ });
191+}
scripts/start.jsnew file+145
@@ -0,0 +1,145 @@
1+'use strict';
2+
3+// Do this as the first thing so that any code reading it knows the right env.
4+process.env.BABEL_ENV = 'development';
5+process.env.NODE_ENV = 'development';
6+
7+// Makes the script crash on unhandled rejections instead of silently
8+// ignoring them. In the future, promise rejections that are not handled will
9+// terminate the Node.js process with a non-zero exit code.
10+process.on('unhandledRejection', err => {
11+ throw err;
12+});
13+
14+// Ensure environment variables are read.
15+require('../config/env');
16+
17+
18+const fs = require('fs');
19+const chalk = require('react-dev-utils/chalk');
20+const webpack = require('webpack');
21+const WebpackDevServer = require('webpack-dev-server');
22+const clearConsole = require('react-dev-utils/clearConsole');
23+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
24+const {
25+ choosePort,
26+ createCompiler,
27+ prepareProxy,
28+ prepareUrls,
29+} = require('react-dev-utils/WebpackDevServerUtils');
30+const openBrowser = require('react-dev-utils/openBrowser');
31+const paths = require('../config/paths');
32+const configFactory = require('../config/webpack.config');
33+const createDevServerConfig = require('../config/webpackDevServer.config');
34+
35+const useYarn = fs.existsSync(paths.yarnLockFile);
36+const isInteractive = process.stdout.isTTY;
37+
38+// Warn and crash if required files are missing
39+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
40+ process.exit(1);
41+}
42+
43+// Tools like Cloud9 rely on this.
44+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
45+const HOST = process.env.HOST || '0.0.0.0';
46+
47+if (process.env.HOST) {
48+ console.log(
49+ chalk.cyan(
50+ `Attempting to bind to HOST environment variable: ${chalk.yellow(
51+ chalk.bold(process.env.HOST)
52+ )}`
53+ )
54+ );
55+ console.log(
56+ `If this was unintentional, check that you haven't mistakenly set it in your shell.`
57+ );
58+ console.log(
59+ `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
60+ );
61+ console.log();
62+}
63+
64+// We require that you explicitly set browsers and do not fall back to
65+// browserslist defaults.
66+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
67+checkBrowsers(paths.appPath, isInteractive)
68+ .then(() => {
69+ // We attempt to use the default port but if it is busy, we offer the user to
70+ // run on a different port. `choosePort()` Promise resolves to the next free port.
71+ return choosePort(HOST, DEFAULT_PORT);
72+ })
73+ .then(port => {
74+ if (port == null) {
75+ // We have not found a port.
76+ return;
77+ }
78+ const config = configFactory('development');
79+ const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
80+ const appName = require(paths.appPackageJson).name;
81+ const useTypeScript = fs.existsSync(paths.appTsConfig);
82+ const urls = prepareUrls(protocol, HOST, port);
83+ const devSocket = {
84+ warnings: warnings =>
85+ devServer.sockWrite(devServer.sockets, 'warnings', warnings),
86+ errors: errors =>
87+ devServer.sockWrite(devServer.sockets, 'errors', errors),
88+ };
89+ // Create a webpack compiler that is configured with custom messages.
90+ const compiler = createCompiler({
91+ appName,
92+ config,
93+ devSocket,
94+ urls,
95+ useYarn,
96+ useTypeScript,
97+ webpack,
98+ });
99+ // Load proxy config
100+ const proxySetting = require(paths.appPackageJson).proxy;
101+ const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
102+ // Serve webpack assets generated by the compiler over a web server.
103+ const serverConfig = createDevServerConfig(
104+ proxyConfig,
105+ urls.lanUrlForConfig
106+ );
107+ const devServer = new WebpackDevServer(compiler, serverConfig);
108+ // Launch WebpackDevServer.
109+ devServer.listen(port, HOST, err => {
110+ if (err) {
111+ return console.log(err);
112+ }
113+ if (isInteractive) {
114+ clearConsole();
115+ }
116+
117+ // We used to support resolving modules according to `NODE_PATH`.
118+ // This now has been deprecated in favor of jsconfig/tsconfig.json
119+ // This lets you use absolute paths in imports inside large monorepos:
120+ if (process.env.NODE_PATH) {
121+ console.log(
122+ chalk.yellow(
123+ 'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
124+ )
125+ );
126+ console.log();
127+ }
128+
129+ console.log(chalk.cyan('Starting the development server...\n'));
130+ openBrowser(urls.localUrlForBrowser);
131+ });
132+
133+ ['SIGINT', 'SIGTERM'].forEach(function(sig) {
134+ process.on(sig, function() {
135+ devServer.close();
136+ process.exit();
137+ });
138+ });
139+ })
140+ .catch(err => {
141+ if (err && err.message) {
142+ console.log(err.message);
143+ }
144+ process.exit(1);
145+ });
scripts/test.jsnew file+52
@@ -0,0 +1,52 @@
1+'use strict';
2+
3+// Do this as the first thing so that any code reading it knows the right env.
4+process.env.BABEL_ENV = 'test';
5+process.env.NODE_ENV = 'test';
6+process.env.PUBLIC_URL = '';
7+
8+// Makes the script crash on unhandled rejections instead of silently
9+// ignoring them. In the future, promise rejections that are not handled will
10+// terminate the Node.js process with a non-zero exit code.
11+process.on('unhandledRejection', err => {
12+ throw err;
13+});
14+
15+// Ensure environment variables are read.
16+require('../config/env');
17+
18+
19+const jest = require('jest');
20+const execSync = require('child_process').execSync;
21+let argv = process.argv.slice(2);
22+
23+function isInGitRepository() {
24+ try {
25+ execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26+ return true;
27+ } catch (e) {
28+ return false;
29+ }
30+}
31+
32+function isInMercurialRepository() {
33+ try {
34+ execSync('hg --cwd . root', { stdio: 'ignore' });
35+ return true;
36+ } catch (e) {
37+ return false;
38+ }
39+}
40+
41+// Watch unless on CI or explicitly running all tests
42+if (
43+ !process.env.CI &&
44+ argv.indexOf('--watchAll') === -1
45+) {
46+ // https://github.com/facebook/create-react-app/issues/5210
47+ const hasSourceControl = isInGitRepository() || isInMercurialRepository();
48+ argv.push(hasSourceControl ? '--watch' : '--watchAll');
49+}
50+
51+
52+jest.run(argv);