解析create-react-app

最近入職了新公司,開始轉戰 react 了。嘗試了一下  create-react-app

 這個腳手架，發現和 vue-cli3 一樣，都是追求零配置的方案了。

出于好奇嘗試着了解一下它們是怎麼做到零配置的。

https://juejin.im/entry/5b320f09e51d4558cb101a13#%E5%AE%89%E8%A3%85 安裝

npx create-react-app my-app
cd my-app
npm start           

安裝後之後，就是這樣的了

配置

這樣的”零配置”沒法滿足我們的需求，我們需要自定義，需要加一些 loader，plugin 等。

react 團隊當然也提供了這樣的途徑

yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!           

執行 yarn eject (這是一個不可逆操作)

這個指令将部配置設定置檔案釋放出來，目錄結構就變成下面這樣子了

這時候就能夠對 webpack.config 進行配置了,不過有的同學也會發現,package.json script 中并沒有發現 

webpack -c config.js

 類似的指令，也沒有看到

.eslintrc

、

.babelrc

 等配置檔案。

不過 package.json->script 中能看到 這三條指令

"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"           

打開使用者開發環境的 start.js 看看

片段：

// 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.
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);
  });           

在 start.js 中通過代碼來啟動 webpack 以及 DevServer

eslint 和 babel 的配置 寫在了 package.json 裡

"babel": {
  "presets": [
    "react-app"
  ]
},
"eslintConfig": {
  "extends": "react-app"
},           

能中 dependencies 中找到對應的兩個庫 

babel-preset-react-app

和

eslint-config-react-app

檢視

babel-preset-react-app

源碼，就能看到具體的 babel 配置了(eslint-config-react-app 同理),對這一塊不熟悉的同學可以看看怎樣組合 presets plugin 和 polyfill 的( ps:經常看到網上很多人貼出來的配置 會打包一大堆不需要的 polyfill )

原文釋出時間為：2018年06月28日

原文作者：掘金

本文來源： 

掘金

 如需轉載請聯系原作者