diff --git a/config/env.js b/config/env.js index 58a4b65..e2486d7 100644 --- a/config/env.js +++ b/config/env.js @@ -1,38 +1,38 @@ -'use strict'; +"use strict" // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be // injected into the application via DefinePlugin in Webpack configuration. -var REACT_APP = /^REACT_APP_/i; +var REACT_APP = /^REACT_APP_/i function getClientEnvironment(publicUrl) { - var raw = Object - .keys(process.env) + var raw = Object.keys(process.env) .filter(key => REACT_APP.test(key)) - .reduce((env, key) => { - env[key] = process.env[key]; - return env; - }, { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - 'NODE_ENV': process.env.NODE_ENV || 'development', - // Useful for resolving the correct path to static assets in `public`. - // For example, . - // This should only be used as an escape hatch. Normally you would put - // images into the `src` and `import` them in code to get their paths. - 'PUBLIC_URL': publicUrl - }); + .reduce( + (env, key) => { + env[key] = process.env[key] + return env + }, + { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + NODE_ENV: process.env.NODE_ENV || "development", + // Useful for resolving the correct path to static assets in `public`. + // For example, . + // This should only be used as an escape hatch. Normally you would put + // images into the `src` and `import` them in code to get their paths. + PUBLIC_URL: publicUrl + } + ) // Stringify all values so we can feed into Webpack DefinePlugin var stringified = { - 'process.env': Object - .keys(raw) - .reduce((env, key) => { - env[key] = JSON.stringify(raw[key]); - return env; - }, {}) - }; + "process.env": Object.keys(raw).reduce((env, key) => { + env[key] = JSON.stringify(raw[key]) + return env + }, {}) + } - return { raw, stringified }; + return { raw, stringified } } -module.exports = getClientEnvironment; +module.exports = getClientEnvironment diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js index f1534f6..198fb60 100644 --- a/config/jest/cssTransform.js +++ b/config/jest/cssTransform.js @@ -1,14 +1,14 @@ -'use strict'; +"use strict" // This is a custom Jest transformer turning style imports into empty objects. // http://facebook.github.io/jest/docs/tutorial-webpack.html module.exports = { process() { - return 'module.exports = {};'; + return "module.exports = {};" }, getCacheKey() { // The output is always the same. - return 'cssTransform'; - }, -}; + return "cssTransform" + } +} diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js index d1cc3b2..fdc72d7 100644 --- a/config/jest/fileTransform.js +++ b/config/jest/fileTransform.js @@ -1,12 +1,12 @@ -'use strict'; +"use strict" -const path = require('path'); +const path = require("path") // This is a custom Jest transformer turning file imports into filenames. // http://facebook.github.io/jest/docs/tutorial-webpack.html module.exports = { process(src, filename) { - return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; - }, -}; + return "module.exports = " + JSON.stringify(path.basename(filename)) + ";" + } +} diff --git a/config/paths.js b/config/paths.js index 6d16e6d..a79fda1 100644 --- a/config/paths.js +++ b/config/paths.js @@ -1,14 +1,14 @@ -'use strict'; +"use strict" -var path = require('path'); -var fs = require('fs'); -var url = require('url'); +var path = require("path") +var fs = require("fs") +var url = require("url") // Make sure any symlinks in the project folder are resolved: // https://github.com/facebookincubator/create-react-app/issues/637 -var appDirectory = fs.realpathSync(process.cwd()); +var appDirectory = fs.realpathSync(process.cwd()) function resolveApp(relativePath) { - return path.resolve(appDirectory, relativePath); + return path.resolve(appDirectory, relativePath) } // We support resolving modules according to `NODE_PATH`. @@ -26,27 +26,27 @@ function resolveApp(relativePath) { // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 -var nodePaths = (process.env.NODE_PATH || '') - .split(process.platform === 'win32' ? ';' : ':') +var nodePaths = (process.env.NODE_PATH || "") + .split(process.platform === "win32" ? ";" : ":") .filter(Boolean) .filter(folder => !path.isAbsolute(folder)) - .map(resolveApp); + .map(resolveApp) -var envPublicUrl = process.env.PUBLIC_URL; +var envPublicUrl = process.env.PUBLIC_URL function ensureSlash(path, needsSlash) { - var hasSlash = path.endsWith('/'); + var hasSlash = path.endsWith("/") if (hasSlash && !needsSlash) { - return path.substr(path, path.length - 1); + return path.substr(path, path.length - 1) } else if (!hasSlash && needsSlash) { - return path + '/'; + return path + "/" } else { - return path; + return path } } function getPublicUrl(appPackageJson) { - return envPublicUrl || require(appPackageJson).homepage; + return envPublicUrl || require(appPackageJson).homepage } // We use `PUBLIC_URL` environment variable or "homepage" field to infer @@ -56,25 +56,23 @@ function getPublicUrl(appPackageJson) { // We can't use a relative path in HTML because we don't want to load something // like /todos/42/static/js/bundle.7289d.js. We have to know the root. function getServedPath(appPackageJson) { - var publicUrl = getPublicUrl(appPackageJson); - var servedUrl = envPublicUrl || ( - publicUrl ? url.parse(publicUrl).pathname : '/' - ); - return ensureSlash(servedUrl, true); + var publicUrl = getPublicUrl(appPackageJson) + var servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "/") + return ensureSlash(servedUrl, true) } // config after eject: we're in ./config/ module.exports = { - appBuild: resolveApp('build'), - appPublic: resolveApp('public'), - appHtml: resolveApp('public/index.html'), - appIndexJs: resolveApp('client/index.js'), - appPackageJson: resolveApp('package.json'), - appSrc: resolveApp('client'), - yarnLockFile: resolveApp('yarn.lock'), - testsSetup: resolveApp('client/setupTests.js'), - appNodeModules: resolveApp('node_modules'), + appBuild: resolveApp("build"), + appPublic: resolveApp("public"), + appHtml: resolveApp("public/index.html"), + appIndexJs: resolveApp("client/index.js"), + appPackageJson: resolveApp("package.json"), + appSrc: resolveApp("client"), + yarnLockFile: resolveApp("yarn.lock"), + testsSetup: resolveApp("client/setupTests.js"), + appNodeModules: resolveApp("node_modules"), nodePaths: nodePaths, - publicUrl: getPublicUrl(resolveApp('package.json')), - servedPath: getServedPath(resolveApp('package.json')) -}; + publicUrl: getPublicUrl(resolveApp("package.json")), + servedPath: getServedPath(resolveApp("package.json")) +} diff --git a/config/polyfills.js b/config/polyfills.js index 5c1d866..107cc3f 100644 --- a/config/polyfills.js +++ b/config/polyfills.js @@ -1,16 +1,16 @@ -'use strict'; +"use strict" -if (typeof Promise === 'undefined') { +if (typeof Promise === "undefined") { // Rejection tracking prevents a common issue where React gets into an // inconsistent state due to an error, but it gets swallowed by a Promise, // and the user has no idea what causes React's erratic future behavior. - require('promise/lib/rejection-tracking').enable(); - window.Promise = require('promise/lib/es6-extensions.js'); + require("promise/lib/rejection-tracking").enable() + window.Promise = require("promise/lib/es6-extensions.js") } // fetch() polyfill for making API calls. -require('whatwg-fetch'); +require("whatwg-fetch") // Object.assign() is commonly used with React. // It will use the native implementation if it's present and isn't buggy. -Object.assign = require('object-assign'); +Object.assign = require("object-assign") diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 72cd2a0..0898df7 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -1,25 +1,23 @@ -'use strict'; - -var autoprefixer = require('autoprefixer'); -var webpack = require('webpack'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); -var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); -var getClientEnvironment = require('./env'); -var paths = require('./paths'); - +"use strict" +var autoprefixer = require("autoprefixer") +var webpack = require("webpack") +var HtmlWebpackPlugin = require("html-webpack-plugin") +var CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin") +var InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin") +var WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin") +var getClientEnvironment = require("./env") +var paths = require("./paths") // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. -var publicPath = '/'; +var publicPath = "/" // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. -var publicUrl = ''; +var publicUrl = "" // Get environment variables to inject into our app. -var env = getClientEnvironment(publicUrl); +var env = getClientEnvironment(publicUrl) // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -27,7 +25,7 @@ var env = getClientEnvironment(publicUrl); module.exports = { // You may want 'eval' instead if you prefer to see the compiled output in DevTools. // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. - devtool: 'cheap-module-source-map', + devtool: "cheap-module-source-map", // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. // The first two entry points enable "hot" CSS and auto-refreshes for JS. @@ -42,9 +40,9 @@ module.exports = { // the line below with these two lines if you prefer the stock client: // require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack/hot/dev-server'), - require.resolve('react-dev-utils/webpackHotDevClient'), + require.resolve("react-dev-utils/webpackHotDevClient"), // We ship a few polyfills by default: - require.resolve('./polyfills'), + require.resolve("./polyfills"), // Finally, this is your app's code: paths.appIndexJs // We include the app code last so that if there is a runtime error during @@ -59,7 +57,7 @@ module.exports = { // This does not produce a real file. It's just the virtual path that is // served by WebpackDevServer in development. This is the JS bundle // containing code from all our entry points, and the Webpack runtime. - filename: '_static/js/bundle.js', + filename: "_static/js/bundle.js", // This is the URL that app is served from. We use "/" in development. publicPath: publicPath }, @@ -74,22 +72,22 @@ module.exports = { // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.js', '.json', '.jsx', ''], + extensions: [".js", ".json", ".jsx", ""], alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - 'react-native': 'react-native-web' + "react-native": "react-native-web" } }, - + module: { // First, run the linter. // It's important to do this before Babel processes the JS. preLoaders: [ { test: /\.(js|jsx)$/, - loader: 'eslint', - include: paths.appSrc, + loader: "eslint", + include: paths.appSrc } ], loaders: [ @@ -116,19 +114,18 @@ module.exports = { /\.svg$/, /\.md$/ ], - loader: 'url', + loader: "url", query: { limit: 10000, - name: '_static/media/[name].[hash:8].[ext]' + name: "_static/media/[name].[hash:8].[ext]" } }, // Process JS with Babel. { test: /\.(js|jsx)$/, include: paths.appSrc, - loader: 'babel', + loader: "babel", query: { - // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. @@ -142,44 +139,44 @@ module.exports = { // in development "style" loader enables hot editing of CSS. { test: /\.css$/, - loader: 'style!css?importLoaders=1!postcss' + loader: "style!css?importLoaders=1!postcss" }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. { test: /\.json$/, - loader: 'json' + loader: "json" }, // "file" loader for svg { test: /\.svg$/, - loader: 'file', + loader: "file", query: { - name: '_static/media/[name].[hash:8].[ext]' + name: "_static/media/[name].[hash:8].[ext]" } }, // HTML loader for Markdown files. { test: /\.md$/, - loader: 'html!markdown' + loader: "html!markdown" } // ** STOP ** Are you adding a new loader? // Remember to add the new extension(s) to the "url" loader exclusion list. ] }, - + // We use PostCSS for autoprefixing only. postcss: function() { return [ autoprefixer({ browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway + ">1%", + "last 4 versions", + "Firefox ESR", + "not ie < 9" // React doesn't support IE8 anyway ] - }), - ]; + }) + ] }, plugins: [ // Makes some environment variables available in index.html. @@ -190,7 +187,7 @@ module.exports = { // Generates an `index.html` file with the