成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

學(xué)習(xí) create-react-app

qujian / 2600人閱讀

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

版本說(shuō)明：2.0.4

首先看文檔中怎樣使用：

這里的兩條命令是等價(jià)的，以npm init ...為例來(lái)看命令是怎么用的

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

所以這里調(diào)用的是create-react-app這個(gè)包中的bin字段；

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

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

來(lái)看一下createReactApp文件，這個(gè)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這個(gè)神器，是一個(gè)幫助快速開發(fā)Nodejs命令行工具的package。

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

通讀下來(lái)createReactApp.js就是一個(gè)幫助搭建項(xiàng)目文件夾，寫package.json一些語(yǔ)句的作用。

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

// 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"
    );
  }
/* 下面這個(gè)函數(shù)就是來(lái)獲取react-scripts應(yīng)該安裝的版本號(hào) */
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ù)...
不對(duì)的請(qǐng)賜教，請(qǐng)輕噴，鞠躬

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98733.html

相關(guān)文章

  • create-react-app 源碼學(xué)習(xí)（上）

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

    MkkHou 評(píng)論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（十五）：詳解 ES6 Modules

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

    Lowky 評(píng)論0 收藏0

  • React項(xiàng)目服務(wù)端部署過(guò)程記錄（create-react-app）

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

    spademan 評(píng)論0 收藏0

  • 官方create-react-app 入門（一）

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

    _ang 評(píng)論0 收藏0

  • 深度解析`create-react-app`源碼

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

    waruqi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

qujian

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<