Upgrade react-scripts
This commit is contained in:
JUDIT GRESKOVITS
Sérgio Ramos
parent
a8c34ee756
commit
d429f820e9
@ -10,7 +10,6 @@
|
||||
"graphql-tag": "^2.0.0",
|
||||
"loadash": "^0.0.1",
|
||||
"prop-types": "^15.5.9",
|
||||
"proxyquire": "^1.7.11",
|
||||
"react": "^15.5.4",
|
||||
"react-apollo": "^1.2.0",
|
||||
"react-dom": "^15.5.4",
|
||||
@ -21,17 +20,17 @@
|
||||
"redux-actions": "^2.0.3",
|
||||
"redux-form": "^6.7.0",
|
||||
"reselect": "^3.0.1",
|
||||
"rewire": "^2.5.2",
|
||||
"simple-statistics": "^4.1.0",
|
||||
"styled-components": "^1.4.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-scripts": "0.9.5"
|
||||
"react-scripts": "^1.0.5"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "PORT=3069 node scripts/customized-config start",
|
||||
"build": "node scripts/customized-config build",
|
||||
"test": "node scripts/customized-config test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
"start": "PORT=3069 react-scripts start",
|
||||
"build": "node react-scripts build",
|
||||
"test": "node react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"install": "node scripts/postinstall"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const paths = require('./paths');
|
||||
|
||||
const {
|
||||
ROOT,
|
||||
MODULES,
|
||||
FRONTEND,
|
||||
UI,
|
||||
STATIC
|
||||
} = paths;
|
||||
|
||||
module.exports = function(config) {
|
||||
// Add support for loading .graphql files
|
||||
config.module.loaders[0].exclude.push(/\.(graphql|gql)$/);
|
||||
|
||||
const loaders = config.module.loaders.reduce((loaders, loader) => {
|
||||
if(loader.loader === 'babel') {
|
||||
loaders.push({
|
||||
test: loader.test,
|
||||
include: loader.include,
|
||||
loader: loader.loader,
|
||||
query: {
|
||||
babelrc: false,
|
||||
presets: [require.resolve('babel-preset-react-app')],
|
||||
plugins: [["inline-react-svg", {
|
||||
"ignorePattern": "libre-franklin"
|
||||
}]],
|
||||
cacheDirectory: true
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
loaders.push(loader);
|
||||
}
|
||||
return loaders;
|
||||
}, []);
|
||||
|
||||
config.module.loaders = loaders;
|
||||
|
||||
config.module.loaders.push({
|
||||
test: /\.(graphql|gql)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: require.resolve('graphql-tag/loader'),
|
||||
});
|
||||
|
||||
config.resolveLoader.modules = MODULES;
|
||||
|
||||
config.resolve.modules = MODULES;
|
||||
|
||||
config.resolve.alias = Object.assign({}, config.resolve.alias, fs.readdirSync(FRONTEND)
|
||||
.map((name) => path.join(FRONTEND, name))
|
||||
.filter((fullpath) => fs.statSync(fullpath).isDirectory())
|
||||
.reduce((aliases, fullpath) => Object.assign(aliases, {
|
||||
[`@${path.basename(fullpath)}`]: fullpath
|
||||
}), {
|
||||
'@root': FRONTEND,
|
||||
'@ui': UI
|
||||
}));
|
||||
|
||||
config.module.loaders = config.module.loaders.map((loader) => {
|
||||
if(loader.include) {
|
||||
return Object.assign({}, loader, {include: [loader.include, UI]});
|
||||
}
|
||||
return loader;
|
||||
});
|
||||
|
||||
return config;
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
/*
|
||||
This module runs the scripts from react-scripts (Create React App)
|
||||
and gives an opportunity to override the Webpack config by creating
|
||||
a "config-overrides.dev.js" or "config-overrides.prod.js" file in the
|
||||
root of the project.
|
||||
|
||||
The config-override file should export a single function that takes a
|
||||
config and returns the modified config, like this:
|
||||
|
||||
module.exports = function(webpackConfig) {
|
||||
return webpackConfig;
|
||||
};
|
||||
*/
|
||||
var rewire = require('rewire');
|
||||
var proxyquire = require('proxyquire');
|
||||
|
||||
switch(process.argv[2]) {
|
||||
// The "start" script is run during development mode
|
||||
case 'start':
|
||||
rewireModule('react-scripts/scripts/start.js', loadCustomizer('./config-overrides.dev'));
|
||||
break;
|
||||
// The "build" script is run to produce a production bundle
|
||||
case 'build':
|
||||
rewireModule('react-scripts/scripts/build.js', loadCustomizer('./config-overrides.prod'));
|
||||
break;
|
||||
// The "test" script runs all the tests with Jest
|
||||
case 'test':
|
||||
// Load customizations from the config-overrides.testing file.
|
||||
// That file should export a single function that takes a config and returns a config
|
||||
let customizer = loadCustomizer('./config-overrides.testing');
|
||||
proxyquire('react-scripts/scripts/test.js', {
|
||||
// When test.js asks for '../utils/createJestConfig' it will get this instead:
|
||||
'../utils/createJestConfig': (...args) => {
|
||||
// Use the existing createJestConfig function to create a config, then pass
|
||||
// it through the customizer
|
||||
var createJestConfig = require('react-scripts/utils/createJestConfig');
|
||||
return customizer(createJestConfig(...args));
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
console.log('customized-config only supports "start", "build", and "test" options.');
|
||||
process.exit(-1);
|
||||
}
|
||||
|
||||
// Attempt to load the given module and return null if it fails.
|
||||
function loadCustomizer(module) {
|
||||
try {
|
||||
return require(module);
|
||||
} catch(e) {
|
||||
if(e.code !== "MODULE_NOT_FOUND") {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
// If the module doesn't exist, return a
|
||||
// noop that simply returns the config it's given.
|
||||
return config => config;
|
||||
}
|
||||
|
||||
function rewireModule(modulePath, customizer) {
|
||||
// Load the module with `rewire`, which allows modifying the
|
||||
// script's internal variables.
|
||||
let defaults = rewire(modulePath);
|
||||
|
||||
// Reach into the module, grab its global 'config' variable,
|
||||
// pass it through the customizer function, and then set it back.
|
||||
// 'config' is Create React App's built-in Webpack config.
|
||||
let config = defaults.__get__('config');
|
||||
config = customizer(Object.assign({}, config));
|
||||
defaults.__set__('config', config);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
const path = require('path');
|
||||
|
||||
const ROOT = path.join(__dirname, '../..');
|
||||
const UI = path.join(ROOT, 'ui');
|
||||
const FRONTEND = process.env.NODE_ENV === 'production'
|
||||
? path.join(__dirname, '../')
|
||||
: path.join(ROOT, 'frontend');
|
||||
|
||||
module.exports = {
|
||||
ROOT,
|
||||
MODULES: [
|
||||
path.join(FRONTEND, 'node_modules'),
|
||||
path.join(UI, 'node_modules'),
|
||||
'node_modules'
|
||||
],
|
||||
FRONTEND: path.join(FRONTEND, 'src'),
|
||||
UI: process.env.NODE_ENV === 'production'
|
||||
? path.join(FRONTEND, 'node_modules', '@tomgco/joyent-portal-ui', 'dist')
|
||||
: path.join(UI, 'src'),
|
||||
STATIC: path.join(FRONTEND, 'static'),
|
||||
ESLINT: path.join(__dirname, '.eslintrc')
|
||||
};
|
||||
35
frontend/scripts/postinstall.js
Normal file
35
frontend/scripts/postinstall.js
Normal file
@ -0,0 +1,35 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
// TODO: this will need to happen for prod and test too
|
||||
const configPath = path.join(__dirname, '../node_modules/react-scripts/config/webpack.config.dev.js');
|
||||
const orignalConfigPath = path.join(__dirname, '../node_modules/react-scripts/config/webpack.config.dev.original.js');
|
||||
const enhancedConfigPath = path.join(__dirname, './webpack.config.dev.js');
|
||||
|
||||
// bit of healthy callback hell for making it spicy
|
||||
fs.readFile(configPath, (error, orignalConfig) => {
|
||||
if(error) {
|
||||
console.log('Original config read error', error);
|
||||
}
|
||||
else {
|
||||
fs.writeFile(orignalConfigPath, orignalConfig, (error) => {
|
||||
if(error) {
|
||||
console.log('Original config write error', error);
|
||||
}
|
||||
else {
|
||||
fs.readFile(enhancedConfigPath, (error, enhancedConfig) => {
|
||||
if(error) {
|
||||
console.log('Enhanced config read error', error);
|
||||
}
|
||||
else {
|
||||
fs.writeFile(configPath, enhancedConfig, (error) => {
|
||||
if(error) {
|
||||
console.log('Enhanced config write error', error);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
111
frontend/scripts/webpack.config.dev.js
Normal file
111
frontend/scripts/webpack.config.dev.js
Normal file
@ -0,0 +1,111 @@
|
||||
// @remove-on-eject-begin
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
// @remove-on-eject-end
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const paths = require('./paths');
|
||||
const originalConfig = require('./webpack.config.dev.original');
|
||||
|
||||
const ROOT = path.join(__dirname, '../../../..');
|
||||
const UI_ROOT = path.join(ROOT, 'ui');
|
||||
const FRONTEND_ROOT = process.env.NODE_ENV === 'production'
|
||||
? path.join(__dirname, '../')
|
||||
: path.join(ROOT, 'frontend');
|
||||
|
||||
const MODULES = [
|
||||
path.join(FRONTEND_ROOT, 'node_modules'),
|
||||
path.join(UI_ROOT, 'node_modules'),
|
||||
'node_modules'
|
||||
];
|
||||
const FRONTEND = path.join(FRONTEND_ROOT, 'src'); // duplicate
|
||||
const UI = process.env.NODE_ENV === 'production'
|
||||
? path.join(FRONTEND_ROOT, 'node_modules', '@tomgco/joyent-portal-ui', 'dist')
|
||||
: path.join(UI_ROOT, 'src'); // also duplicate
|
||||
const STATIC = path.join(FRONTEND_ROOT, 'static');
|
||||
const ESLINT = path.join(__dirname, '.eslintrc');
|
||||
|
||||
// module.exports = originalConfig;
|
||||
|
||||
// module.exports = function() {
|
||||
|
||||
console.log('originalConfig = ', originalConfig);
|
||||
// return originalConfig;
|
||||
|
||||
// config.module.rules[1].exclude.push(/\.(graphql|gql)$/);
|
||||
|
||||
const rules = originalConfig.module.rules.reduce((loaders, loader, index) => {
|
||||
if(loader.test === /\.(js|jsx)$/) {
|
||||
loaders.push({
|
||||
test: loader.test,
|
||||
include: [loader.include, UI],
|
||||
loader: loader.loader,
|
||||
options: {
|
||||
babelrc: false,
|
||||
presets: [require.resolve('babel-preset-react-app')],
|
||||
plugins: [['inline-react-svg', {
|
||||
ignorePattern: 'libre-franklin'
|
||||
}]],
|
||||
cacheDirectory: true
|
||||
}
|
||||
})
|
||||
}
|
||||
else if(index === 1) {
|
||||
loaders.push({
|
||||
exclude: loader.exclude.concat([/\.(graphql|gql)$/]),
|
||||
loader: loader.loader,
|
||||
options: loader.options
|
||||
})
|
||||
}
|
||||
else if(loader.include) {
|
||||
loaders.push(Object.assign({}, loader, {include: [loader.include, UI]}));
|
||||
}
|
||||
else {
|
||||
loaders.push(loader);
|
||||
}
|
||||
return loaders;
|
||||
}, []);
|
||||
|
||||
rules.push({
|
||||
test: /\.(graphql|gql)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: require.resolve('graphql-tag/loader')
|
||||
});
|
||||
|
||||
const aliases = Object.assign({}, originalConfig.resolve.alias, fs.readdirSync(FRONTEND)
|
||||
.map((name) => path.join(FRONTEND, name))
|
||||
.filter((fullpath) => fs.statSync(fullpath).isDirectory())
|
||||
.reduce((aliases, fullpath) => Object.assign(aliases, {
|
||||
[`@${path.basename(fullpath)}`]: fullpath
|
||||
}), {
|
||||
'@root': FRONTEND,
|
||||
'@ui': UI
|
||||
}));
|
||||
|
||||
const resolveModules = originalConfig.resolve.modules.concat(MODULES);
|
||||
|
||||
originalConfig.module.rules = rules;
|
||||
originalConfig.resolve.alias = aliases;
|
||||
originalConfig.resolve.modules = resolveModules;
|
||||
originalConfig.resolve.plugins = [];
|
||||
|
||||
module.exports = originalConfig;
|
||||
|
||||
// return originalConfig;
|
||||
|
||||
// resolves
|
||||
// config.resolveLoader.modules = MODULES;
|
||||
|
||||
// config.resolve.modules = MODULES;
|
||||
|
||||
// set rules and return
|
||||
|
||||
// }
|
||||
2560
frontend/yarn.lock
2560
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user