菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
299
0

react

原创
05/13 14:22
阅读数 47993

1、create-react-app创建React项目:

  • 1 )https://create-react-app.dev/docs/getting-started/
    npx create-react-app demo --template typescript,可以创建支持Typescript类型的react项目;
  • 2)react-app-rewired此工具可以在不 'eject' 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置,然后你将拥有 create-react-app 的一切特性,且可以根据你的需要去配置 webpack 的 plugins, loaders 等。
    例如:可以自定义webpack的打包配置

2、使用webpack自己搭建react项目:

一、babel

  • 1)babel: https://babeljs.io/setup#installation,, 其他的一个文档中文
    + @babel/preset-env 包括ecmascript中的新特性,es6,es7....一些最新的js特性
    + @babel/preset-react:转换jsx语法
    + @babel/preset-typescript:Babel 可以删除类型注释

  • 2) @babel/polyfill 模块包括 core-js 和一个自定义的 regenerator runtime 模块用于模拟完整的 ES2015+ 环境。

  • 3)@babel/plugin-transform-runtime: https://zhuanlan.zhihu.com/p/147083132, 待测试可以先不用

yarn add @babel/plugin-transform-runtime -D

yarn add @babel/runtime-corejs3

二、webpack

  1. webpack配置文件,css,图片,字体
    webpack配置Typescript
    webpack配置参考

三、typescript

) tsconfig.json:typescript 一个基本的配置文件,可以设置编译为es5

四、webpack 插件

1) html-webpack-plugin

五、webpack 热更新:https://github.com/pmmmwh/react-refresh-webpack-plugin/ (后期可以考虑使用,暂时先没用)

demo

六、eslint

初始化

七、react-router

八、搭建步骤

babel
webpack
css
webpack配置
webpack babel
webpack dev prod
hmr
eslint
react-router redux
redux-thunk 异步 axios
history
withRouter

发表评论

0/200
299 点赞
0 评论
收藏
为你推荐 换一批