學習 create-react-app

qujian 發(fā)布于2019-08-23 12:33 / 2656人閱讀

摘要：所以再看文件這里不貼圖占地方有興趣自己看。常見的用法就是和中的搭配發(fā)布自己的包通讀下來就是一個幫助搭建項目文件夾，寫一些語句的作用。

版本說明：2.0.4

首先看文檔中怎樣使用：

這里的兩條命令是等價的，以npm init ...為例來看命令是怎么用的

上面的意思就是說npm init 會調用已知的npm package create-,并且會執(zhí)行這個create-中package.json定義的bin；

所以這里調用的是create-react-app這個包中的bin字段；

這里的bin的作用依然看官方文檔，意思就是如果全局安裝，會在環(huán)境變量中加入myapp，并與cli.js連接；如果是項目內安裝，那么放在node_modules/.bin/中，(這里node_modules/.bin/是放置所有可執(zhí)行文件的地方), 本地調用依然會執(zhí)行cli.js文件。

所以再看./index.js文件, 這里不貼圖, 占地方, 有興趣自己看 create-react-app/index.js。其實這個文件只是做node的版本控制，保證不低于8.0；在文件最后重要的來了

來看一下createReactApp文件，這個6，有900+行，依然放鏈接啦 createReactApp.js,
以下是部分源碼

let projectName;
const program = new commander.Command(packageJson.name)
  .version(packageJson.version)
  .arguments("")
  .usage(`${chalk.green("")} [options]`)
  .action(name => {
    projectName = name;
  })
  .option("--verbose", "print additional logs")
  .option("--info", "print environment debug info")
  .option(
    "--scripts-version ",
    "use a non-standard version of react-scripts"
  )
  .option("--use-npm")
  .option("--use-pnp")
  .option("--typescript")
  .allowUnknownOption()
  .on("--help", () => {
    console.log(`    Only ${chalk.green("")} is required.`);
    console.log();
    console.log(
      `    A custom ${chalk.cyan("--scripts-version")} can be one of:`
    );
    console.log(`      - a specific npm version: ${chalk.green("0.8.2")}`);
    console.log(`      - a specific npm tag: ${chalk.green("@next")}`);
    console.log(
      `      - a custom fork published on npm: ${chalk.green(
        "my-react-scripts"
      )}`
    );
    console.log(
      `      - a local path relative to the current working directory: ${chalk.green(
        "file:../my-react-scripts"
      )}`
    );
    console.log(
      `      - a .tgz archive: ${chalk.green(
        "https://mysite.com/my-react-scripts-0.8.2.tgz"
      )}`
    );
    console.log(
      `      - a .tar.gz archive: ${chalk.green(
        "https://mysite.com/my-react-scripts-0.8.2.tar.gz"
      )}`
    );
    console.log(
      `    It is not needed unless you specifically want to use a fork.`
    );
    console.log();
    console.log(
      `    If you have any problems, do not hesitate to file an issue:`
    );
    console.log(
      `      ${chalk.cyan(
        "https://github.com/facebook/create-react-app/issues/new"
      )}`
    );
    console.log();
  })
  .parse(process.argv);

這里使用到的是commander.js這個神器，是一個幫助快速開發(fā)Nodejs命令行工具的package。

commander.js常見的用法就是和package.json中的bin搭配發(fā)布自己的npm包

通讀下來createReactApp.js就是一個幫助搭建項目文件夾，寫package.json一些語句的作用。

其中比較重要的是安裝包的過程，從下面代碼能得知默認為我們安裝了react,react-dom,react-scripts(使用ts,還要安裝幾個依賴包)

// function run()
  const packageToInstall = getInstallPackage(version, originalDirectory);
  const allDependencies = ["react", "react-dom", packageToInstall];
  if (useTypescript) {
    allDependencies.push(
      "@types/react",
      "@types/react-dom",
      "@types/jest",
      "typescript"
    );
  }
/* 下面這個函數(shù)就是來獲取react-scripts應該安裝的版本號 */
function getInstallPackage(version, originalDirectory) {
  let packageToInstall = "react-scripts";
  const validSemver = semver.valid(version);
  if (validSemver) {
    packageToInstall += `@${validSemver}`;
  } else if (version) {
    if (version[0] === "@" && version.indexOf("/") === -1) {
      packageToInstall += version;
    } else if (version.match(/^file:/)) {
      packageToInstall = `file:${path.resolve(
        originalDirectory,
        version.match(/^file:(.*)?$/)[1]
      )}`;
    } else {
      // for tar.gz or alternative paths
      packageToInstall = version;
    }
  }
  return packageToInstall;
}

未完待續(xù)...
不對的請賜教，請輕噴，鞠躬

GPU云服務器云服務器 create-react-app 學習機器學習學習機器學習學習深度學習學習

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/98733.html

create-react-app 源碼學習（上）

摘要：這里通過調用方法方法主要是通過來通過命令執(zhí)行下的方法。原文地址Nealyang/personalBlog 前言對于前端工程構建，很多公司、BU 都有自己的一套構建體系,比如我們正在使用的 def，或者 vue-cli 或者 create-react-app，由于筆者最近一直想搭建一個個人網(wǎng)站，秉持著呼吸不停，折騰不止的原則，編碼的過程中，還是不想太過于枯燥。在 coding 之前...

MkkHou 2019-08-23 18:12 評論0 收藏0
前端基礎進階（十五）：詳解 ES6 Modules

摘要：下載地址安裝一個好用的命令行工具在環(huán)境下，系統(tǒng)默認的非常難用，所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎進階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說，想要自己去搞定一個E...

Lowky 2019-08-21 18:31 評論0 收藏0
React項目服務端部署過程記錄（create-react-app）

摘要：但在完成最后部署上線是遇到一些小問題，由于搜索無果，便記錄于此。由于是自己的項目，自己的云服務器。由于之前部署項目時也碰到過這種類似的問題，當時是通過修改配置解決的。 1.前言說在最最前這次分享比較啰嗦啦，想說的很多。實際問題的解決是 2-3.恍然大悟部分，可以直接跳過其他多余的絮叨哦～最近入職新公司由于前端主要是react，遂開始去學習了解react，這兩天跟著電子書《The...

spademan 2019-08-22 15:22 評論0 收藏0
官方create-react-app 入門（一）

摘要：目的希望找到像類似的腳手架，便于入門。參考地址系統(tǒng)過程將升級到以上，將有一個新的包，。目錄地點運行開發(fā)環(huán)境測試運行發(fā)布環(huán)境。我這次暫且選在充當發(fā)布環(huán)境。在中添加或者結果就可以在中看到發(fā)布后的項目。目的：希望找到像Vue-cli類似的腳手架，便于入門。通過此項目學習React。參考地址： https://github.com/facebook/c... 系統(tǒng)： macOS 過...

_ang 2019-08-22 17:34 評論0 收藏0
深度解析`create-react-app`源碼

摘要：這個選項看意思就知道了，默認使用來安裝，運行，如果你沒有使用，你可能就需要這個配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波關于create-react-app 源碼的關鍵詞，發(fā)現(xiàn)掘金出現(xiàn)好幾篇仿文，就連我開頭前沿瞎幾把啰嗦的話都抄，我還能說什么是吧？以后博客還是首發(fā)在Github上，地址戳這里戳這里?。∞D載求你們注明出處、改編求你們貼一下參考鏈...

waruqi 2019-08-22 13:59 評論0 收藏0