Skip to content

Commit

Permalink
Unroll indirection in paths (#191)
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon authored Jul 25, 2016
1 parent d69ee27 commit dfecfea
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 102 deletions.
64 changes: 64 additions & 0 deletions config/paths.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/**
* 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.
*/

// TODO: we can split this file into several files (pre-eject, post-eject, test)
// and use those instead. This way we don't need to branch here.

var path = require('path');

// True when used as a dependency, false after ejecting
var isInNodeModules = (
'node_modules' ===
path.basename(path.resolve(path.join(__dirname, '..', '..')))
);

// Are we developing create-react-app locally?
var isInCreateReactAppSource = (
process.argv.some(arg => arg.indexOf('--debug-template') > -1)
);

function resolve(relativePath) {
return path.resolve(__dirname, relativePath);
}

if (isInCreateReactAppSource) {
// create-react-app development: we're in ./config/
module.exports = {
appBuild: resolve('../build'),
appHtml: resolve('../template/index.html'),
appFavicon: resolve('../template/favicon.ico'),
appPackageJson: resolve('../package.json'),
appSrc: resolve('../template/src'),
appNodeModules: resolve('../node_modules'),
ownNodeModules: resolve('../node_modules')
};
} else if (isInNodeModules) {
// before eject: we're in ./node_modules/react-scripts/config/
module.exports = {
appBuild: resolve('../../../build'),
appHtml: resolve('../../../index.html'),
appFavicon: resolve('../../../favicon.ico'),
appPackageJson: resolve('../../../package.json'),
appSrc: resolve('../../../src'),
appNodeModules: resolve('../..'),
// this is empty with npm3 but node resolution searches higher anyway:
ownNodeModules: resolve('../node_modules')
};
} else {
// after eject: we're in ./config/
module.exports = {
appBuild: resolve('../build'),
appHtml: resolve('../index.html'),
appFavicon: resolve('../favicon.ico'),
appPackageJson: resolve('../package.json'),
appSrc: resolve('../src'),
appNodeModules: resolve('../node_modules'),
ownNodeModules: resolve('../node_modules')
};
}
38 changes: 12 additions & 26 deletions config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,18 @@ var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

// TODO: hide this behind a flag and eliminate dead code on eject.
// This shouldn't be exposed to the user.
var isInNodeModules = 'node_modules' ===
path.basename(path.resolve(path.join(__dirname, '..', '..')));
var relativePath = isInNodeModules ? '../../..' : '..';
var isInDebugMode = process.argv.some(arg =>
arg.indexOf('--debug-template') > -1
);
if (isInDebugMode) {
relativePath = '../template';
}
var srcPath = path.resolve(__dirname, relativePath, 'src');
var rootNodeModulesPath = path.resolve(__dirname, relativePath, 'node_modules');
var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html');
var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico');
var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build');
var paths = require('./paths');

module.exports = {
devtool: 'eval',
entry: [
require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
require.resolve('webpack/hot/dev-server'),
path.join(srcPath, 'index')
path.join(paths.appSrc, 'index')
],
output: {
// Next line is not used in dev but WebpackDevServer crashes without it:
path: buildPath,
path: paths.appBuild,
pathinfo: true,
filename: 'bundle.js',
publicPath: '/'
Expand All @@ -48,39 +31,42 @@ module.exports = {
extensions: ['', '.js'],
},
resolveLoader: {
root: nodeModulesPath,
root: paths.ownNodeModules,
moduleTemplates: ['*-loader']
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint',
include: srcPath,
include: paths.appSrc,
}
],
loaders: [
{
test: /\.js$/,
include: srcPath,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
{
test: /\.css$/,
include: [srcPath, rootNodeModulesPath],
include: [paths.appSrc, paths.appNodeModules],
loader: 'style!css!postcss'
},
{
test: /\.json$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'json'
},
{
test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'file',
},
{
test: /\.(mp4|webm)$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'url?limit=10000'
}
]
Expand All @@ -95,8 +81,8 @@ module.exports = {
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: indexHtmlPath,
favicon: faviconPath,
template: paths.appHtml,
favicon: paths.appFavicon,
}),
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
// Note: only CSS is currently hot reloaded
Expand Down
36 changes: 13 additions & 23 deletions config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,9 @@ var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var url = require('url');
var paths = require('./paths');

// TODO: hide this behind a flag and eliminate dead code on eject.
// This shouldn't be exposed to the user.
var isInNodeModules = 'node_modules' ===
path.basename(path.resolve(path.join(__dirname, '..', '..')));
var relativePath = isInNodeModules ? '../../..' : '..';
if (process.argv[2] === '--debug-template') {
relativePath = '../template';
}
var srcPath = path.resolve(__dirname, relativePath, 'src');
var rootNodeModulesPath = path.resolve(__dirname, relativePath, 'node_modules');
var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html');
var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico');
var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build');
var homepagePath = require(path.resolve(__dirname, relativePath, 'package.json')).homepage;
var homepagePath = require(paths.appPackageJson).homepage;
var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
if (!publicPath.endsWith('/')) {
// Prevents incorrect paths in file-loader
Expand All @@ -38,9 +25,9 @@ if (!publicPath.endsWith('/')) {
module.exports = {
bail: true,
devtool: 'source-map',
entry: path.join(srcPath, 'index'),
entry: path.join(paths.appSrc, 'index'),
output: {
path: buildPath,
path: paths.appBuild,
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
publicPath: publicPath
Expand All @@ -49,42 +36,45 @@ module.exports = {
extensions: ['', '.js'],
},
resolveLoader: {
root: nodeModulesPath,
root: paths.ownNodeModules,
moduleTemplates: ['*-loader']
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint',
include: srcPath
include: paths.appSrc
}
],
loaders: [
{
test: /\.js$/,
include: srcPath,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.prod')
},
{
test: /\.css$/,
include: [srcPath, rootNodeModulesPath],
include: [paths.appSrc, paths.appNodeModules],
// Disable autoprefixer in css-loader itself:
// https://github.com/webpack/css-loader/issues/281
// We already have it thanks to postcss.
loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
},
{
test: /\.json$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'json'
},
{
test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'file',
},
{
test: /\.(mp4|webm)$/,
include: [paths.appSrc, paths.appNodeModules],
loader: 'url?limit=10000'
}
]
Expand All @@ -101,8 +91,8 @@ module.exports = {
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: indexHtmlPath,
favicon: faviconPath,
template: paths.appHtml,
favicon: paths.appFavicon,
minify: {
removeComments: true,
collapseWhitespace: true,
Expand Down
14 changes: 3 additions & 11 deletions scripts/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,12 @@

process.env.NODE_ENV = 'production';

var path = require('path');
var rimrafSync = require('rimraf').sync;
var webpack = require('webpack');
var config = require('../config/webpack.config.prod');
var paths = require('../config/paths');

var isInNodeModules = 'node_modules' ===
path.basename(path.resolve(path.join(__dirname, '..', '..')));
var relative = isInNodeModules ? '../../..' : '..';
if (process.argv[2] === '--debug-template') {
relative = '../template';
}
var packageJsonPath = path.join(__dirname, relative, 'package.json');
var buildPath = path.join(__dirname, relative, 'build');
rimrafSync(buildPath);
rimrafSync(paths.appBuild);

webpack(config).run(function(err, stats) {
if (err) {
Expand All @@ -32,7 +24,7 @@ webpack(config).run(function(err, stats) {
}

var openCommand = process.platform === 'win32' ? 'start' : 'open';
var homepagePath = require(packageJsonPath).homepage;
var homepagePath = require(paths.appPackageJson).homepage;
console.log('Successfully generated a bundle in the build folder!');
if (homepagePath) {
console.log('You can now deploy it to ' + homepagePath + '.');
Expand Down
Loading

0 comments on commit dfecfea

Please sign in to comment.