186526/unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Prettify

Browse Source
This commit is contained in:
MICHAEL JACKSON
2017-11-25 21:19:55 -08:00
parent 758b420297
commit 51f3bca3fb
13 changed files with 476 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
config/env.js
View File

@ -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, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// 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, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// 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

10
config/jest/cssTransform.js
View File

@ -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"
}
}

10
config/jest/fileTransform.js
View File

@ -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)) + ";"
}
}

62
config/paths.js
View File

@ -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"))
}

12
config/polyfills.js
View File

@ -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")

85
config/webpack.config.dev.js
View File

@ -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 <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
template: paths.appHtml
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
@ -210,8 +207,8 @@ module.exports = {
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
fs: "empty",
net: "empty",
tls: "empty"
}
};
}

111
config/webpack.config.prod.js
View File

@ -1,46 +1,44 @@
'use strict';
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var paths = require('./paths');
var getClientEnvironment = require('./env');
"use strict"
var autoprefixer = require("autoprefixer")
var webpack = require("webpack")
var HtmlWebpackPlugin = require("html-webpack-plugin")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var ManifestPlugin = require("webpack-manifest-plugin")
var InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin")
var paths = require("./paths")
var getClientEnvironment = require("./env")
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
var publicPath = paths.servedPath;
var publicPath = paths.servedPath
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
var shouldUseRelativeAssetPaths = publicPath === './';
var shouldUseRelativeAssetPaths = 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_URL%/xyz looks better than %PUBLIC_URL%xyz.
var publicUrl = publicPath.slice(0, -1);
var publicUrl = publicPath.slice(0, -1)
// Get environment variables to inject into our app.
var env = getClientEnvironment(publicUrl);
var env = getClientEnvironment(publicUrl)
// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.');
if (env.stringified["process.env"].NODE_ENV !== '"production"') {
throw new Error("Production builds must have NODE_ENV=production.")
}
// Note: defined here because it will be used more than once.
const cssFilename = '_static/css/[name].[contenthash:8].css';
const cssFilename = "_static/css/[name].[contenthash:8].css"
// ExtractTextPlugin expects the build output to be flat.
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
// However, our output is structured with css, js and media folders.
// To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
// Making sure that the publicPath goes back to to build folder.
? { publicPath: Array(cssFilename.split('/').length).join('../') }
: undefined;
? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split("/").length).join("../") }
: undefined
// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
@ -50,20 +48,17 @@ module.exports = {
bail: true,
// We generate sourcemaps in production. This is slow but gives good results.
// You can exclude the *.map files from the build during deployment.
devtool: 'source-map',
devtool: "source-map",
// In production, we only want to load the polyfills and the app code.
entry: [
require.resolve('./polyfills'),
paths.appIndexJs
],
entry: [require.resolve("./polyfills"), paths.appIndexJs],
output: {
// The build folder.
path: paths.appBuild,
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: '_static/js/[name].[chunkhash:8].js',
chunkFilename: '_static/js/[name].[chunkhash:8].chunk.js',
filename: "_static/js/[name].[chunkhash:8].js",
chunkFilename: "_static/js/[name].[chunkhash:8].chunk.js",
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath
},
@ -78,21 +73,21 @@ 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',
loader: "eslint",
include: paths.appSrc
}
],
@ -106,26 +101,18 @@ module.exports = {
// "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
// Otherwise, it acts like the "file" loader.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/,
/\.md$/
],
loader: 'url',
exclude: [/\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.svg$/, /\.md$/],
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"
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
@ -142,8 +129,8 @@ module.exports = {
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style',
'css?importLoaders=1!postcss',
"style",
"css?importLoaders=1!postcss",
extractTextPluginOptions
)
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
@ -152,38 +139,38 @@ module.exports = {
// 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.
@ -238,14 +225,14 @@ module.exports = {
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json'
fileName: "asset-manifest.json"
})
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
fs: "empty",
net: "empty",
tls: "empty"
}
};
}