构建 react应用程序（二）（react-scripts实现原理）

矫情吗；* 2022-06-13 14:37 543阅读 0赞

在前面讲到了使用create-react-app来创建项目，这节我们来分析下原理。  
react-scripts有以下支持，都帮你配置好了：

React, JSX, ES6, and Flow syntax support.
    Language extras beyond ES6 like the object spread operator.
    Import CSS and image files directly from JavaScript.
    Autoprefixed CSS, so you don’t need -webkit or other prefixes.
    A build script to bundle JS, CSS, and images for production, with sourcemaps.
    A dev server that lints for common errors.

翻译就不翻译了，大概就是说es6、css依赖啊 图片依赖之类的都已经通过react-scripts配置好了。  
其实babel-core，webpack，等等这些 你都没下载，配置。  
这些活，react-scripts 都帮你做了。

在命令窗口输入的是npm start，而start调用的是

"start": "react-scripts start",

找到node\_modules里面的react-scripts 插件。点开bin\\react-scripts.js文件内容

'use strict';
    
    const spawn = require('react-dev-utils/crossSpawn');
    const script = process.argv[2];
    const args = process.argv.slice(3);
    
    switch (script) {
      case 'build':
      case 'eject':
      case 'start':
      case 'test': {
        const result = spawn.sync(
          'node',
          [require.resolve('../scripts/' + script)].concat(args),
          { stdio: 'inherit' }
        );
        if (result.signal) {
          if (result.signal === 'SIGKILL') {
            console.log(
              'The build failed because the process exited too early. ' +
                'This probably means the system ran out of memory or someone called ' +
                '`kill -9` on the process.'
            );
          }

[require.resolve('../scripts/' + script)].concat(args),

从上面这话可以看出调用start时需要调用scripts/start.js，点开该文件：

// @remove-on-eject-end
    'use strict';
    
    // Do this as the first thing so that any code reading it knows the right env.
    process.env.BABEL_ENV = 'development';
    process.env.NODE_ENV = 'development';
    
    // Makes the script crash on unhandled rejections instead of silently
    // ignoring them. In the future, promise rejections that are not handled will
    // terminate the Node.js process with a non-zero exit code.
    process.on('unhandledRejection', err => {
      throw err;
    });
    
    // Ensure environment variables are read.
    require('../config/env');
    
    const fs = require('fs');
    const chalk = require('chalk');
    const webpack = require('webpack');//这里引入了webpack
    const WebpackDevServer = require('webpack-dev-server');//这里引入了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');
    const openBrowser = require('react-dev-utils/openBrowser');
    const paths = require('../config/paths');//文件处理的配置
    const config = require('../config/webpack.config.dev');
    //dev解析的相关配置
    const createDevServerConfig = require('../config/webpackDevServer.config');
    
    const useYarn = fs.existsSync(paths.yarnLockFile);
    const isInteractive = process.stdout.isTTY;
    
    // Warn and crash if required files are missing
    if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
      process.exit(1);
    }
    
    // Tools like Cloud9 rely on this.
    const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;//端口设置 这就是为什么 端口号 不是8080 而是 3000 的原因，在这里可以改成8080，重新npm run start 生效 
    const HOST = process.env.HOST || '0.0.0.0';
    
    // We attempt to use the default port but if it is busy, we offer the user to
    // run on a different port. `detect()` Promise resolves to the next free port.
    choosePort(HOST, DEFAULT_PORT)
      .then(port => {
        if (port == null) {
          // We have not found a port.
          return;
        }
        const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
        const appName = require(paths.appPackageJson).name;
        const urls = prepareUrls(protocol, HOST, port);
        // Create a webpack compiler that is configured with custom messages.
        const compiler = createCompiler(webpack, config, appName, urls, useYarn);
        // 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 sever.
        const serverConfig = createDevServerConfig(
          proxyConfig,
          urls.lanUrlForConfig
        );
        const devServer = new WebpackDevServer(compiler, serverConfig);
        // Launch WebpackDevServer.
        devServer.listen(port, HOST, err => {
          if (err) {
            return console.log(err);
          }
          if (isInteractive) {
            clearConsole();
          }
          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);
      });

点开path路径，其实里面好多默认的配置都是写在该文件，可以通过修改改文件来实现自己文件的存放配置

// @remove-on-eject-begin
    
     */
    // @remove-on-eject-end
    'use strict';
    
    const path = require('path');
    const fs = require('fs');
    const url = require('url');
    
    // Make sure any symlinks in the project folder are resolved:
    // https://github.com/facebookincubator/create-react-app/issues/637
    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
    
    const envPublicUrl = process.env.PUBLIC_URL;
    
    function ensureSlash(path, needsSlash) { 
      const hasSlash = path.endsWith('/');
      if (hasSlash && !needsSlash) {
        return path.substr(path, path.length - 1);
      } else if (!hasSlash && needsSlash) {
        return `${path}/`;
      } else {
        return path;
      }
    }
    
    const getPublicUrl = appPackageJson =>
      envPublicUrl || require(appPackageJson).homepage;
    
    
    function getServedPath(appPackageJson) { 
      const publicUrl = getPublicUrl(appPackageJson);
      const servedUrl =
        envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
      return ensureSlash(servedUrl, true);
    }
    
    // config after eject: we're in ./config/
    module.exports = {
      dotenv: resolveApp('.env'),
      appBuild: resolveApp('build'),
      appPublic: resolveApp('public'),
      appHtml: resolveApp('public/index.html'),
      appIndexJs: resolveApp('src/index.js'),
      appPackageJson: resolveApp('package.json'),
      appSrc: resolveApp('src'),
      yarnLockFile: resolveApp('yarn.lock'),
      testsSetup: resolveApp('src/setupTests.js'),
      appNodeModules: resolveApp('node_modules'),
      publicUrl: getPublicUrl(resolveApp('package.json')),
      servedPath: getServedPath(resolveApp('package.json')),
    };
    
    // @remove-on-eject-begin
    const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
    
    // config before eject: we're in ./node_modules/react-scripts/config/
    module.exports = {
      dotenv: resolveApp('.env'),
      appPath: resolveApp('.'),
      appBuild: resolveApp('build'),
      appPublic: resolveApp('public'),
      appHtml: resolveApp('public/index.html'),
      appIndexJs: resolveApp('src/index.js'),
      appPackageJson: resolveApp('package.json'),
      appSrc: resolveApp('src'),
      yarnLockFile: resolveApp('yarn.lock'),
      testsSetup: resolveApp('src/setupTests.js'),
      appNodeModules: resolveApp('node_modules'),
      publicUrl: getPublicUrl(resolveApp('package.json')),
      servedPath: getServedPath(resolveApp('package.json')),
      // These properties only exist before ejecting:
      ownPath: resolveOwn('.'),
      ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
    };
    
    const ownPackageJson = require('../package.json');
    const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`);
    const reactScriptsLinked =
      fs.existsSync(reactScriptsPath) &&
      fs.lstatSync(reactScriptsPath).isSymbolicLink();
    
    // config before publish: we're in ./packages/react-scripts/config/
    if (
      !reactScriptsLinked &&
      __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1
    ) {
      module.exports = {
        dotenv: resolveOwn('template/.env'),
        appPath: resolveApp('.'),
        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'),
        publicUrl: getPublicUrl(resolveOwn('package.json')),
        servedPath: getServedPath(resolveOwn('package.json')),
        // These properties only exist before ejecting:
        ownPath: resolveOwn('.'),
        ownNodeModules: resolveOwn('node_modules'),
      };
    }
    // @remove-on-eject-end

点开webpack.config.dev.js，也会发现大量是曾相识的代码：

{
            test: /\.(js|jsx)$/,
            enforce: 'pre',
            use: [
              {
                options: {
                  formatter: eslintFormatter,
                  // @remove-on-eject-begin
                  baseConfig: {
                    extends: [require.resolve('eslint-config-react-app')],
                  },
                  ignore: false,
                  useEslintrc: false,
                  // @remove-on-eject-end
                },
                loader: require.resolve('eslint-loader'),
              },
            ],
            include: paths.appSrc,
          },
          // ** ADDING/UPDATING LOADERS **
          // The "file" loader handles all assets unless explicitly excluded.
          // The `exclude` list *must* be updated with every change to loader extensions.
          // When adding a new loader, you must add its `test`
          // as a new entry in the `exclude` list for "file" loader.
    
          // "file" loader makes sure those assets get served by WebpackDevServer.
          // When you `import` an asset, you get its (virtual) filename.
          // In production, they would get copied to the `build` folder.
          {
            exclude: [
              /\.html$/,
              /\.(js|jsx)$/,
              /\.css$/,
              /\.json$/,
              /\.bmp$/,
              /\.gif$/,
              /\.jpe?g$/,
              /\.png$/,
            ],
            loader: require.resolve('file-loader'),
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          // "url" loader works like "file" loader except that it embeds assets
          // smaller than specified limit in bytes as data URLs to avoid requests.
          // A missing `test` is equivalent to a match.
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve('url-loader'),
            options: {
              limit: 10000,
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          // Process JS with Babel.
          {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @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/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

具体这些内容细节就不讲解了，说白点的我们以前通过手配置的webpack.config.js的内容react-scripts都已经帮我们做了，当然是否还缺其他组件，目前不知道在后续使用过程中，如果发现的不同我们再来一一记录。