学习 create-react-app

qujian 发布于2019-08-23 12:33 / 2592人阅读

摘要：所以再看文件这里不贴图占地方有兴趣自己看。常见的用法就是和中的搭配发布自己的包通读下来就是一个帮助搭建项目文件夹，写一些语句的作用。

版本说明：2.0.4

首先看文档中怎样使用：

这里的两条命令是等价的，以npm init ...为例来看命令是怎么用的

上面的意思就是说npm init 会调用已知的npm package create-,并且会执行这个create-中package.json定义的bin；

所以这里调用的是create-react-app这个包中的bin字段；

这里的bin的作用依然看官方文档，意思就是如果全局安装，会在环境变量中加入myapp，并与cli.js连接；如果是项目内安装，那么放在node_modules/.bin/中，(这里node_modules/.bin/是放置所有可执行文件的地方), 本地调用依然会执行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这个神器，是一个帮助快速开发Nodejs命令行工具的package。

commander.js常见的用法就是和package.json中的bin搭配发布自己的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"
    );
  }
/* 下面这个函数就是来获取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;
}

未完待续...
不对的请赐教，请轻喷，鞠躬

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98733.html

create-react-app 源码学习（上）

摘要：这里通过调用方法方法主要是通过来通过命令执行下的方法。原文地址Nealyang/personalBlog 前言对于前端工程构建，很多公司、BU 都有自己的一套构建体系,比如我们正在使用的 def，或者 vue-cli 或者 create-react-app，由于笔者最近一直想搭建一个个人网站，秉持着呼吸不停，折腾不止的原则，编码的过程中，还是不想太过于枯燥。在 coding 之前...

MkkHou 2019-08-23 18:12 评论0 收藏0
前端基础进阶（十五）：详解 ES6 Modules

摘要：下载地址安装一个好用的命令行工具在环境下，系统默认的非常难用，所以我个人比较推荐大家使用或者。下载地址安装在命令行工具中使用查看版本的方式确保与都安装好之后，我们就可以安装了。前端基础进阶系列目录 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 入门（一）

摘要：目的希望找到像类似的脚手架，便于入门。参考地址系统过程将升级到以上，将有一个新的包，。目录地点运行开发环境测试运行发布环境。我这次暂且选在充当发布环境。在中添加或者结果就可以在中看到发布后的项目。目的：希望找到像Vue-cli类似的脚手架，便于入门。通过此项目学习React。参考地址： https://github.com/facebook/c... 系统： macOS 过...

_ang 2019-08-22 17:34 评论0 收藏0
深度解析`create-react-app`源码

摘要：这个选项看意思就知道了，默认使用来安装，运行，如果你没有使用，你可能就需要这个配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波关于create-react-app 源码的关键词，发现掘金出现好几篇仿文，就连我开头前沿瞎几把啰嗦的话都抄，我还能说什么是吧？以后博客还是首发在Github上，地址戳这里戳这里！！转载求你们注明出处、改编求你们贴一下参考链...

waruqi 2019-08-22 13:59 评论0 收藏0