React 16.8.6 学习笔记【1】【利用脚手架创建项目，脚手架剖析，lesswebpack配置】

最新推荐文章于 2023-06-10 15:19:36 发布

godferyZhu

最新推荐文章于 2023-06-10 15:19:36 发布

阅读量433

点赞数

分类专栏：框架学习

本文链接：https://blog.csdn.net/qq_42514643/article/details/98641404

版权

框架学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

React 学习笔记

React 是一款框架:具备自己的开发的独立思想(MVC:Model View Controller)

框架特点:
->划分组件开发;
->基于路由的SPA单页面开发(把所有组件拼接成一个页面);
->基于ES6编写代码(上线的时候,需要把ES6编译成ES5=>基于babel编译);
->可能用到less/sass,我们也需要使用对应的插件,把他们进行预编译;
->最后为了优化性能(减少HTTP请求次数),我们需要把CSS/JS进行合并压缩;
->…
->webpack来完成页面组件合并,JS/CSS编译合并的工作.

前端工程化开发:

什么叫前端工程化开发?
->基于框架的组件化/模块化开发;
->基于webpack的自动部署.

脚手架

由于配置webpack是一个相对复杂的工作,我们需要安装很多包,还需要写相对复杂的配置环境,如果我们有一个插件,基于它可以快速构建一套自动化工程项目结构,那么有助于提高开发效率 => “脚手架”
VUE:vue-cli
REACT:create-react-app

create-react-app 使用:

全局安装命令:npm install create-react-app -g
创建项目:create-react-app [项目名称]
基于脚手架命令,创建出一个基于React的自动化/工程户项目目录,项目中名称中不能出现:大写字母,中文汉字,特殊符号(-或者_是可以的)等

node_modules 当前项目中依赖的包都安装在这里
->.bin 本地项目中可执行的命令,在package.json的scripts中配置对应的脚本即可(其中有一个就是:react-scripts命令)
public 存放的是当前项目的HTML页面,如果是单页面应用就一个index.html即可;如果是多页面应用,就把所有页面放置即可.
->index.html:

一般把lang="en" 去掉,因为他是提示网页翻译成英文
<html lang="en">

把meta标签补全
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />

在react中所有的逻辑都是在js中完成的(包括页面的结构创建)，如果我们想给当前的页面导入一些css样式或者img图片等内容，我们有两种方式：
1，在js中基于ES6 Module 模块规范 使用import导入，这样webpack在编译合并js的时候，会把导入的资源文件插入到页面的结构中。
(绝对不能再js管控的结构中通过相对目录:./或者../导入资源，因为在webpack编译的时候地址就不会是之前的相对地址了)
2，如果不想在js中导入（js中导入的资源，最后都会基于webpack编译），我们也可以把资源手动在html中导入，但是html最后也是要基于webpack编译，导入的地址也不建议写相对路径，而是使用 %PUBLIC_URL% 写成绝对路径。
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

引入reset样式
<link rel="stylesheet" href="%PUBLIC_URL%/css/reset.min.css">

src 项目结构中最主要的目录，因为后期所有的js，路由，组件等都放到这里（包括需要编写的css或者图片等）
1，index.js :当前项目的入口文件
2，.gitignore git提交时候忽略提交文件配置项
3，package.json 当前项目的配置清单

    "dependencies":{
        "react":"^16.8.6",
        "react-dom":"^16.8.6",
        "react-scripts":"3.0.1"
    }
     //基于脚手架生成的工程目录，自动帮我们安装了三个模块：react、react-dom、react-scripts
        react-scripts集成了webpack需要的内容
            ->Babel一套
            ->Css处理一套
            ->eslint一套
            ->webpack一套
            ->其它的
          没有less/sass的处理内容（项目中使用less，我们需要自己额外的安装）
    "script":{
        "start":"react-scripts start",
        "build":"react-scripts build",
        "test":"react-scripts test --env=jsdom",
        "eject":"react-scirpts eject"
     }
     //可执行的脚本 npm run start 或者 yarn start
     start：开发环境下，基于webpack编译处理，最后可以预览当前开发的项目成功（在webpack中安装了webpack-dev-server插件，基于这个插件会自动创建一个WEB服务【端口号：3000】），webpack会帮我们自动打开浏览器，并且展示我们的页面，并且能够监听我们代码的改变，如果代码改变了，webpack会自动重新编译，并且刷新浏览器来完成重新渲染。
     build：项目需要部署上线时，我们先执行 npm run build 或 yarn build，把项目整体编译打包（完成后会在项目中生成一个build文件夹，这个文件中包含了所有编译后的内容，我们把它上传到服务器即可）；而且服务上进行部署的时候，不需要安装任何模块了（因为webpack已经把需要的内容都打包到一个JS中了）

React脚手架深入剖析

create-react-app 脚手架为了让结构目录清晰，把安装的webpack及配置文件都集成在了react-scripts模块中，但是真实项目中，我们需要在脚手架默认安装的基础上，额外安装一些我们需要的模块。例如：react-router-dom、axios 。。。再比如：less、less-loader。。。

情况一：如果我们安装的其它组件，安装成功后不需要修改webpack配置项，此时我们直接安装，直接调取使用即可；
情况二：我们安装的插件是基于webpack处理的，也就是需要把安装的模块配置到webpack中（需要修改webpack配置项了，如何操作呢）

=>1，首先需要把隐藏到node_modules中的配置项暴露到项目中
命令：npm run eject 或者 yarn eject
注意事项：
a，首先会提示确认执行eject操作，这个操作是不可逆转的，一但暴露出来配置项，就无法隐藏回去了；
b，如果当前的项目基于git管理，在执行eject的时候，如果还有没有提交到历史区域的内容，需要先提交到历史区，然后在eject才可以，否则报错：This git repostiory has untracked files or uncommited changes…

=>2，再去修改对应的配置项即可

// 一但暴露之后，项目目录中多了两个文件夹：
    ->1, config     存放的是webpack的配置文件
        webpack.config.dev.js   开发环境下的配置项（npm run start）
        webpack.config.prod.js  生产环境下的配置项（npm run build）
        
    ->2，scripts    存放的是可执行的脚本的JS文件
        start.js      npm run start 执行的就是这个js
        build.js     npm run build 执行的就是这个js
        
 //package.json 中的内容也变了，增加很多配置
 
 
 
 【比如我们，需要配置less】
  命令： npm install less less-loader
  通过命令先进行less和lessloader安装
  在暴露出来的配置项中，webpack.config.js 中有两处需要修改
  ->1，styel files regexes 大约40行处
           增加less的正则表达
           const lessRegex =/\.less$/;
           const lessModuleRegex =/\.module\.less$/;
           
  ->2，在oneof数组中，增加两个对象 大约457行下面
           增加less的处理，与上面sass一致
     // 第一个对象  
        {
            test:lessRegex,
            exclude:lessModuleRegex,
            use:getStyleLoaders(
            {
                importLoaders:3,
                sourceMap:isEnvProduction && shouldUseSourceMap,
            },
            'less-loader'
            ),
            sideEffects: true,
        },
    // 第二个对象，两个对象都在同一个数组中
        {
            test:lessModuleRegex,
            use:getStyleLoaders(
            {
                importLoaders:3,
                sourceMap:isEnvDevelopment && shouldUseSourceMap,
                modules:true,
                getLocalIdent:getCSSModuleLocalIdent,
            },
            'less-loader'
            ),
        },
        
   上面增加完成之后，把src中的index.css    改成  index.less
   把index.js中引入的 改为    import './index.less';
   npm run start 启动项目即可。



// 几个常见的环境修改命令
set HTTPS=true&&npm start 开启HTTPS协议模式（设置环境变量HTTPS的值）
set PORT=63341  修改端口

=>3，我们预览项目的时候，也是先基于webpack编译，把编译后的内容放到浏览器中运行，所以如果项目中使用了less，我们需要修改webpack配置项，在配置项中加入less的编译工作，这样后期预览项目，首先基于webpack把less编译为css，然后在呈现在页面中.

godferyZhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 16.8.6 学习笔记【1】【利用脚手架创建项目，脚手架剖析，lesswebpack配置】

React 学习笔记React 是一款框架:具备自己的开发的独立思想(MVC:Model View Controller)框架特点:->划分组件开发;->基于路由的SPA单页面开发(把所有组件拼接成一个页面);->基于ES6编写代码(上线的时候,需要把ES6编译成ES5=>基于babel编译);->可能用到less/sass,我们也需要使用对应的插件,把...
复制链接

扫一扫