React基础

React

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

其它相似打包工具还有rollup.js 、 parcel、FIS等

webpack可以自动解决模块之间的依赖问题

切记： 各模块不要循环引用

按照webpack的指南**(注意是指南不是概念不是api)**进行针对性的讲解即可，需要被充一下工程化的知识

总结：

1. webpack是当下最流行的资源打包工具，但是在它之前，还有很多的打包工具：

   1. grunt  gulp browserify webpack  rollup FIS...
   

   2. webpack市场有两个版本使用： webpack3.0 webpack4.0

   3. webpack是前端工程化、自动化工具

   4. webpack安装、

      1. 全局

      2. 局部（ 项目目录 ）

      cnpm i webpack webpack-cli -g  // 全局
      cnpm i webpack webpack-cli -D  // 局部
      

   5. webpackREPL环境（ 命令行 ） 基础使用

      1. 命令行输入webpack就会自动寻找目录下的src目录下的index.js文件，将这个文件作为入口文件

2. 环境的选择：

   1. 开发环境（ development ） 源代码编写时所处的环境，这个环境中我们可以看到整个项目的错误日志还有错误警告
      2. 生产 环境（ production ）： 代码会被压缩，错误提示会没有，项目上线时时候

3. 研究webpack的功能

   1. 自动解决依赖性问题（ 某一个模块在其他模块中使用 ）
   2. loader( 转换器)
      1. 功能： 将其他类型文件通过loader编译成js文件

工程化

这个部分的内容可以做为一些思想给学员讲解，不需要学员掌握。可以理解为扩展的内容

什么是JS项目工程化

• 版本控制 git svn
• 自动化持续继承、持续交付(CI/CD)
• 代码质量控制(QA)
• 工程化工具 grunt gulp webpack rollup parcel FIS
• 模块化 ：AMD(require.js) CMD(sea.js) Common.js es6
• 文档
• demo

编译过程

自动化处理每次push, tag, release的任务队列

1. 安装
   • 安装 : npm命令行工具
   • 安全审计：npm audit
2. Lint
   • 格式检查: eslint/stylelint
   • 格式化: prettier
3. 测试
   • 测试套装: jest / mocha / ava / kamar
   • 代码覆盖量: nyc / codecov / coveralls
4. 构建
   • 转换器: babel / TS / flow
   • 预处理器: sass / less / postcss/stylus
   • 代码混淆: uglify-js / terser
   • 打包及tree shaking: webpack / rollup / parcel
   • 压缩(gzip等)
   • 复制 / 删除 / 移动文件
   • 检查打包文件的大小
   • 移除无用的代码
5. push
   • 交付: git
   • 发布: npm publish
6. 部署
   • 服务器
     • Pages: git pages
     • 云服务器: aliyun / qcloud / aws
7. Story Book

create-react-app

全局安装create-react-app

$ npm install -g create-react-app

如果不想全局安装，可以直接使用npx

$ npx create-react-app your-app	也可以实现相同的效果

创建一个项目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安装过程较慢，可以推荐使用yarn
Installing react, react-dom, and react-scripts... 

这需要等待一段时间，这个过程实际上会安装三个东西

• react: react的顶级库
• react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。

生成项目的目录结构如下：

├── README.md							使用方法的文档
├── node_modules					所有的依赖安装的目录
├── yarn-lock.json			锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					
├── public								静态公共目录
└── src										开发用的源代码目录

常见问题：

• npm安装失败

  • 切换为npm镜像为淘宝镜像

  • 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内

    yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源
    
    yarn config list // 查看yarn 镜像列表
    

  • 如果还没有办法解决，请删除node_modules及yarn-lock.json然后重新执行cnpm install命令

  • 再不能解决就删除node_modules及yarn-lock.json的同时清除npm缓存npm cache clean --force之后再执行npm install命令

  • 环境变量问题

  • react-scripts 版本过高问题 （ 降低版本 react-script@2.1.8）