菜鸟学习react中，配置文件有点乱，研究一波。
yarn eject之后，文件目录相比之前只是多了config和scripts两个文件夹，package.json多了很多配置项,所以本文主要解决config和package.json两个部分.
一.config文件夹下，还有一个jest文件夹是jest测试文件，cssTransform.js和fileTransform.js对应package.json中的
"transform": { "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" },二.重点分析，从package.json命令行入手，
"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" },看命令就知道scripts下的三个文件，分别对应开发，打包和测试三个环境的入口。
config/path.js里面路径变量
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);//解析对应文件的绝对路径const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage;//赋值下面变量publicUrl，从env.js或者package.json中获取homepagefunction getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); return ensureSlash(servedUrl, true);}//服务域名 ---------- dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), appJsConfig: resolveApp('jsconfig.json'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), publicUrl: getPublicUrl(resolveApp('package.json')), servedPath: getServedPath(resolveApp('package.json')),1.start.js 其实就是开发环境devserver的配置和启动
process.env.BABEL_ENV = 'development';//bebel用到环境变量(@babel/preset-react)process.env.NODE_ENV = 'development';//全局node环境变量process.on('unhandledRejection', err => { throw err;});// Ensure environment variables are read.require('../config/env');//开发环境配置文件const fs = require('fs');const chalk = require('react-dev-utils/chalk');const webpack = require('webpack');const WebpackDevServer = require('webpack-dev-server');const clearConsole = require('react-dev-utils/clearConsole');const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');const { choosePort, createCompiler, prepareProxy, prepareUrls,} = require('react-dev-utils/WebpackDevServerUtils');----------//TODO 下面就是对应devserver的详细配置了，open,host,port,http,proxy等，都是从对应的文件中读取，env.js，package.json等const openBrowser = require('react-dev-utils/openBrowser');const paths = require('../config/paths');const configFactory = require('../config/webpack.config');//webpack对应环境配置的函数const createDevServerConfig = require('../config/webpackDevServer.config');//devserver的配置文件const useYarn = fs.existsSync(paths.yarnLockFile);const isInteractive = process.stdout.isTTY;// Warn and crash if required files are missingif (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1);}// Tools like Cloud9 rely on this.const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;const HOST = process.env.HOST || '0.0.0.0';if (process.env.HOST) { console.log( chalk.cyan( `Attempting to bind to HOST environment variable: ${chalk.yellow( chalk.bold(process.env.HOST) )}` ) ); console.log( `If this was unintentional, check that you haven't mistakenly set it in your shell.` ); console.log( `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}` ); console.log();}// We require that you explicitly set browsers and do not fall back to// browserslist defaults.const { checkBrowsers } = require('react-dev-utils/browsersHelper');checkBrowsers(paths.appPath, isInteractive) .then(() => { // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `choosePort()` Promise resolves to the next free port. return choosePort(HOST, DEFAULT_PORT); }) .then(port => { if (port == null) { // We have not found a port. return; } const config = configFactory('development'); const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const appName = require(paths.appPackageJson).name; const useTypeScript = fs.existsSync(paths.appTsConfig); const urls = prepareUrls(protocol, HOST, port); const devSocket = { warnings: warnings => devServer.sockWrite(devServer.sockets, 'warnings', warnings), errors: errors => devServer.sockWrite(devServer.sockets, 'errors', errors), }; // Create a webpack compiler that is configured with custom messages. const compiler = createCompiler({ appName, config, devSocket, urls, useYarn, useTypeScript, webpack, }); // Load proxy config const proxySetting = require(paths.appPackageJson).proxy; const proxyConfig = prepareProxy(proxySetting, paths.appPublic); // Serve webpack assets generated by the compiler over a web server. const serverConfig = createDevServerConfig( proxyConfig, urls.lanUrlForConfig ); ---------- //TODO devserver开发服务启动 const devServer = new WebpackDevServer(compiler, serverConfig); // Launch WebpackDevServer. devServer.listen(port, HOST, err => { if (err) { return console.log(err); } if (isInteractive) { clearConsole(); } // We used to support resolving modules according to `NODE_PATH`. // This now has been deprecated in favor of jsconfig/tsconfig.json // This lets you use absolute paths in imports inside large monorepos: if (process.env.NODE_PATH) { console.log( chalk.yellow( 'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.' ) ); console.log(); } console.log(chalk.cyan('Starting the development server...\n')); openBrowser(urls.localUrlForBrowser); }); ['SIGINT', 'SIGTERM'].forEach(function(sig) { process.on(sig, function() { devServer.close(); process.exit(); }); }); }) .catch(err => { if (err && err.message) { console.log(err.message); } process.exit(1); });