Customize for our usecases

Author: jayphelps

packages/babel-preset-react-app/package.json

@@ -1,4 +1,5 @@
 {
+ "private": true,
  "name": "babel-preset-react-app",
  "version": "2.0.1",
  "description": "Babel preset used by Create React App",

packages/create-react-app/package.json

@@ -1,4 +1,5 @@
 {
+ "private": true,
  "name": "create-react-app",
  "version": "1.0.1",
  "keywords": [

packages/eslint-config-react-app/package.json

@@ -1,4 +1,5 @@
 {
+ "private": true,
  "name": "eslint-config-react-app",
  "version": "0.5.0",
  "description": "ESLint configuration used by Create React App",

packages/react-dev-utils/package.json

@@ -1,4 +1,5 @@
 {
+ "private": true,
  "name": "react-dev-utils",
  "version": "0.4.1",
  "description": "Webpack utilities used by Create React App",

packages/react-scripts/.eslintrc

@@ -1,3 +1,6 @@
 {
- "extends": "react-app"
+ "extends": "react-app",
+ "rules": {
+ "react/react-in-jsx-scope": "off"
+ }
 }

packages/react-scripts/config/babel-preset-custom.js

@@ -0,0 +1,14 @@
+module.exports = {
+ plugins: [
+ // Turns JSX into createElement() calls
+ [require.resolve('babel-plugin-transform-react-jsx'), {
+ pragma: 'createElement',
+ }],
+ // Import react automatically, as need, when JSX is used
+ [require.resolve('babel-plugin-jsx-pragmatic'), {
+ module: 'react',
+ import: 'createElement',
+ export: 'createElement'
+ }]
+ ]
+};

packages/react-scripts/config/paths.js

@@ -75,21 +75,3 @@ module.exports = {
  ownNodeModules: resolveOwn('../node_modules'),
  nodePaths: nodePaths
 };
-
-// config before publish: we're in ./packages/react-scripts/config/
-if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
- module.exports = {
- appBuild: resolveOwn('../../../build'),
- appPublic: resolveOwn('../template/public'),
- appHtml: resolveOwn('../template/public/index.html'),
- appIndexJs: resolveOwn('../template/src/index.js'),
- appPackageJson: resolveOwn('../package.json'),
- appSrc: resolveOwn('../template/src'),
- yarnLockFile: resolveOwn('../template/yarn.lock'),
- testsSetup: resolveOwn('../template/src/setupTests.js'),
- appNodeModules: resolveOwn('../node_modules'),
- ownNodeModules: resolveOwn('../node_modules'),
- nodePaths: nodePaths
- };
-}
-// @remove-on-eject-end

packages/react-scripts/config/webpack.config.dev.js

@@ -23,6 +23,8 @@ var paths = require('./paths');
 var path = require('path');
 // @remove-on-eject-end
 
+var ComponentResolverPlugin = require('component-resolver-webpack');
+
 // 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 = '/';
@@ -88,6 +90,7 @@ module.exports = {
  // https://github.com/facebookincubator/create-react-app/issues/290
  extensions: ['.js', '.json', '.jsx', ''],
  alias: {
+ '~': paths.appSrc,
  // 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'
@@ -147,8 +150,8 @@ module.exports = {
  loader: 'babel',
  query: {
  // @remove-on-eject-begin
- babelrc: false,
- presets: [require.resolve('babel-preset-react-app')],
+ babelrc: true,
+ presets: [require.resolve('babel-preset-react-app'), require.resolve('./babel-preset-custom')],
  // @remove-on-eject-end
  // This is a feature of `babel-loader` for webpack (not Babel itself).
  // It enables caching results in ./node_modules/.cache/babel-loader/
@@ -185,7 +188,7 @@ module.exports = {
  // Point ESLint to our predefined config.
  eslint: {
  configFile: path.join(__dirname, '../.eslintrc'),
- useEslintrc: false
+ useEslintrc: true
  },
  // @remove-on-eject-end
  // We use PostCSS for autoprefixing only.
@@ -202,6 +205,11 @@ module.exports = {
  ];
  },
  plugins: [
+ // Allows us to resolve files without duplicating filename
+ // like "./Button"" could be resolved to "./Button/Button.js""
+ new webpack.ResolverPlugin([
+ new ComponentResolverPlugin(['jsx', 'js', 'css'])
+ ]),
  // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
  // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  // In development, this will be an empty string.

packages/react-scripts/config/webpack.config.prod.js

@@ -25,6 +25,8 @@ var getClientEnvironment = require('./env');
 var path = require('path');
 // @remove-on-eject-end
 
+var ComponentResolverPlugin = require('component-resolver-webpack');
+
 function ensureSlash(path, needsSlash) {
  var hasSlash = path.endsWith('/');
  if (hasSlash && !needsSlash) {
@@ -158,8 +160,8 @@ module.exports = {
  loader: 'babel',
  // @remove-on-eject-begin
  query: {
- babelrc: false,
- presets: [require.resolve('babel-preset-react-app')],
+ babelrc: true,
+ presets: [require.resolve('babel-preset-react-app'), require.resolve('./babel-preset-custom')],
  },
  // @remove-on-eject-end
  },
@@ -202,7 +204,7 @@ module.exports = {
  // TODO: consider separate config for production,
  // e.g. to enable no-console and no-debugger only in production.
  configFile: path.join(__dirname, '../.eslintrc'),
- useEslintrc: false
+ useEslintrc: true
  },
  // @remove-on-eject-end
  // We use PostCSS for autoprefixing only.
@@ -219,6 +221,11 @@ module.exports = {
  ];
  },
  plugins: [
+ // Allows us to resolve files without duplicating filename
+ // like "./Button"" could be resolved to "./Button/Button.js""
+ new webpack.ResolverPlugin([
+ new ComponentResolverPlugin(['jsx', 'js', 'css'])
+ ]),
  // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
  // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  // In production, it will be an empty string unless you specify "homepage"

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
- "name": "react-scripts",
- "version": "0.8.3",
+ "name": "@jayphelps/react-scripts",
+ "version": "0.0.1",
  "description": "Configuration and scripts for Create React App.",
  "repository": "facebookincubator/create-react-app",
  "license": "BSD-3-Clause",
@@ -28,9 +28,12 @@
  "babel-eslint": "7.0.0",
  "babel-jest": "17.0.2",
  "babel-loader": "6.2.7",
+ "babel-plugin-jsx-pragmatic": "1.0.2",
+ "babel-plugin-transform-react-jsx": "6.8.0",
  "babel-preset-react-app": "^2.0.1",
  "case-sensitive-paths-webpack-plugin": "1.1.4",
  "chalk": "1.1.3",
+ "component-resolver-webpack": "0.4.0",
  "connect-history-api-fallback": "1.3.0",
  "cross-spawn": "4.0.2",
  "css-loader": "0.26.0",