React项目

项目依赖安装

将项目开发基础文件react-mobx-starter-master-.zip解压缩,并用这个目录作为项目根目录
在项目根目录中,执行下面的命令,就会自动按照package.json的配置安装依赖模块
文件链接:https://pan.baidu.com/s/15pG9w2awFVsNZTGljSiU-A
提取码:d1fj

$ npm install

或者

$ npm i 

安装完成后,会生成一个node_modules,里面是安装的所有依赖的模块

项目整体说明

在这里插入图片描述

配置文件详解

package.json

npm init产生的文件,里面记录项目信息,所有项目依赖
版本管理

"repository": {
 "type": "git",
 "url": "https://192.168.124.135/react-mobx/react-mobx-starter.git"
}

项目脚本管理

"scripts": {
    "test": "jest",
    "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",
    "build": "rimraf dist && webpack -p --config webpack.config.prod.js"
  }

scripts属性是一个字典描述,key是名字,value是能够让npm运行的脚本内容
运行时只要输入$ npm run key_name即可

start:启动webpack的dev server开发用WEB Server,只要提供2个功能:静态文件支持、自动刷新和热替换HMR(Hot Module replacement),对应$ npm run start

  • --hot 启动HMR
    - HRM可以在应用程序运行中替换、添加、删除模块,而无需重载页面,只把变化部分替换掉。不适用HMR则自动刷新会导致这个页面刷新
  • –inline默认模式,使用HMR的时候建议开启inline模式。热替换时会有消息显示在控制台
    build:读取指定的配置文件使用webpack构建打包,对应 $ npm run build
    项目依赖
    devDependencies开发时依赖,不会打包到目标文件中,对应npm install xxx --save-dev.
    dependencies运行时依赖,会打包到项目中,对应 npm install xx --save
    开发时依赖
 "devDependencies": {
 "babel-core": "^6.24.1",
 "babel-jest": "^19.0.0",
 "babel-loader": "^6.4.1",
 "babel-plugin-transform-decorators-legacy": "^1.3.4",
 "babel-plugin-transform-runtime": "^6.23.0",
 "babel-preset-env": "^1.4.0",
 "babel-preset-react": "^6.24.1",
 "babel-preset-stage-0": "^6.24.1",
 "css-loader": "^0.28.0",
 "html-webpack-plugin": "^2.28.0",
 "jest": "^19.0.2",
 "less": "^2.7.2",
 "less-loader": "^4.0.3",
 "react-hot-loader": "^4.3.12",
 "rimraf": "^2.6.2",
版本号指定:
版本号 ,严格安装指定版本号的模块
~版本号 ,例如 ~1.2.3 表示安装1.2.x中最新版本,不低于1.2.3,但不能安装1.3.x
^版本号 ,例如 ^2.4.1 表示安装2.x.x最新版本不低于2.4.1
latest ,安装最新版本
1.2.x或1.x
* 任意版本
1.2.7 || >=1.2.9 <2.0.0 ,可以安装1.2.7,或1.2.9本身或者之上的1.2.x版本,但不能是2.x版本
babel 转译
因为开发用了很多ES6语法。babel从6.x开始babel拆分成很多插件,需要什么引入什么。
babel-core 核心模块。
babel-loader webpack把HTML、CSS、JS、图片、字体等资源看做模块,就可以像JS一样加载这些模块。文件类
型不同,就需要各种各样的loader。babel-loader加载ES6+代码转换为ES5。
babel-preset-xxx 预设的转换插件
babel-plugin-transform-decorators-legacy 下面的课程用到了装饰器,这个插件就是转换装饰器用的。
css样式相关
less、less-loader、css-loader、style-loader
react-hot-loader react热加载插件,希望改动保存后,直接在页面上直接反馈出来,不需要手动刷新。
source-map 文件打包,js会合并或者压缩,没法调试,用它来看js原文件是什么。source-map-loader也需要
webpack的 loader
webpack 打包工具,2.4.1 发布于2017年4月,当前2.7.0发布于2017年7月
webpack-dev-server 启动一个开发时用的server
运行时依赖
 "source-map": "^0.5.6",
 "source-map-loader": "^0.2.1",
 "style-loader": "^0.16.1",
 "uglify-js": "^2.8.22",
 "webpack": "^2.4.1",
 "webpack-dev-server": "^2.4.2"
 }

版本号指定:

  • 版本号,严格安装指定版本号的模块
  • 版本号,例如1.2.3表示安装1.2.x中的最新版本,不低于1.2.3,但不能安装1.3.x
  • ^版本号,例如^2.3.1表示安装2.x.x最新版本不低于2.4.1
  • latest,安装最新版本
  • 1.2.x或者1.x
  • *任意版本
  • 1.2.7 || >=1.2.9<2.0.0,可以安装1.2.7,或1.2.9本身之上的1.2.x版本,但不能是2.x版本

babel转译
因为开发用了很多ES6语法,babel从6.x开始babel拆分成很多插件,需要什么引入什么
babel-core核心模块
babel-loader webpack把HTML、CSS、JS、图片、文字等资源看做模块,就可以像JS一样加载这些模块,文件类型不同,就需要各种不同的loader。babel-loader加载ES6+代码转换为ES5
babel-preset-xxx预设的转换插件
babel-plugin-transform-decorators-legacy甬道了装饰器,这个拆安就是转换装饰器用的

css样式相关
less、less-loader、css-loader、style-loader
react-hot-loader react热加载插件,希望改动保存后,直接在页面上直接反馈出来,不需要手动刷新。
source-map 文件打包,js会合并或者压缩,没法调试,用它来看js原文件是什么。source-map-loader也需要webpack的 loader
webpack 打包工具,2.4.1 发布于2017年4月,当前2.7.0发布于2017年7月
webpack-dev-server 启动一个开发时用的server

运行时依赖

"dependencies": {
 "antd": "^3.10.9",
 "axios": "^0.16.1",
 "babel-polyfill": "^6.23.0",
 "babel-runtime": "^6.23.0",
 "mobx": "^4.6.0",
 "mobx-react": "^5.4.2",
 "react": "^16.6.3",
 "react-dom": "^16.6.3",
 "react-router": "^4.3.1",
 "react-router-dom": "^4.3.1"
 }

antd 即 ant design,基于react实现,蚂蚁金服开源的react的UI库。做中后台管理非常方便
axios 异步请求支持
babel-polyfill 由于babel只转译ES6语法,像Promise、Symbol等对象的新的API并不转译。写好polyfill就让你的
浏览器支持,帮你抹平差异。
react 开发的主框架
react-dom 支持DOM
react-router 支持路由
react-router-dom DOM绑定路由
mobx 状态管理库,透明化。
mobx-react mobx和react结合的模块。react和mobx是一个强强联合

babel配置

.babelrc babel转译的配置文件

{
 "presets": [
 "react",
 "env",
 "stage-0"
 ],
 "plugins": [
 "transform-decorators-legacy", 
 "transform-runtime",
 "react-hot-loader/babel"
 ]
}
webpack配置

webpack.config.dev.js
这是一个符合Commonjs的模块
module.exports导出
devtool:‘source-map’

  • 生成及如何生成source-map文件
  • source-map适合,生成环境使用,会生成完成Sourcemap独立文件
  • 由于在Bundle中添加了引用注释,所以开发工具知道如何找到Sourcemap

entry入口

  • 描述入口。webpack会从入口开始,找到直接或间接的模块和库构建依赖树,最后输出为bundles文件中
  • entry如果是一个字符串,定义就是入口文件
  • 如果是一个数组,数组中最后一项是入口文件,其他项先加载,可以配置的热加载插件来自动刷新页面
  • 如果是一个对象,可以支持多入口,也可以是函数,返回以上的字符串或者数组或对象,好处是动态生成

output输出

  • 告诉webpack输出bundles到哪里,如何命名
  • filename 定义输出的bundle的文件名称
  • path输出目录是_dirname+‘dist’,_dirname是nodejs中获取当前js文件所在的目录名,path是nodejs中的路径处理模块
  • pathlicPath可以是绝对路径或者相对路径,一般会以/结尾,/assets/表示网站根目录下assets目录下

resolve解析

  • 设置模块如何被解析。
  • extensions 自动解析扩展名。’.js’的意思是,如果用户导入模块的时候不带扩展名,它尝试补全。
    module 模块
  • 如何处理不同的模块
  • rules 匹配请求的规则,以应用不同的加载器、解析器等。
module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: [
 { loader: 'babel-loader' }
 ]
 }, {
 test: /\.css$/,
 use: [
 { loader: "style-loader" },
 { loader: "css-loader" },
 ]
 }, 
 {
 test: /\.less$/,
 use: [
 { loader: "style-loader" },
 { loader: "css-loader" },
 { loader: "less-loader" }
 ]
 }
 ]
},
  • test 匹配条件的
    exclude 排除的, /node_modules/打包排除目录。这一句一定要有,否则,编译就把这个目录下所有文件也拿进来了,巨大无比。
    use 使用模块的UseEntries列表中的loader。
    rules中对.js结尾的但不在node_modules目录的文件使用转译babel-loader。

加载器:

  • less-loader 对less的支持预编译为CSS
  • css-loader 加载css
  • style-loader通过

LESS
CSS好处简单易学,但是坏处是没有模块化、复用的概念,因为它不是语言。
LESS是一门CSS的预处理语言,扩展了CSS,增加了变量、Mixin、函数等开发语言的特性,从而简化了CSS的编
写。
LESS本身是一套语法规则及解析器,将写好的LESS解析成CSS。LESS可以使用在浏览器端和服务器端。

@color: #4D926F; 
#header { 
color: @color; 
} 
h2 { 
color: @color; 
}

可以使用解析成如下的CSS

#header { 
color: #4D926F; 
} 
h2 { 
color: #4D926F; 
}

LESS在服务器端使用,需要使用LESS编译器, $ npm install less ,本项目目录已经安装过了。

编译输出到控制台
$ node_modules/.bin/lessc test.less
$ npx lessc test.less
编译输出到文件
$ node_modules/.bin/lessc test.less test.css
$ npx lessc test.less test.css

plugins:webpack的插件

  • HotModuleReplacementPlugin 开启HMR
  • DefinePlugin 全局常量配置

devServer,开发用server

devServer: {
 compress: true,
 port: 3000,
 publicPath: '/assets/',
 hot: true,
 inline: true,
 historyApiFallback: true,
 stats: {
 chunks: false
 },
 proxy: {
 '/api': {
 target: 'http://127.0.0.1:8000',
 changeOrigin: true
 }
 }
}

compress 启动gzip
port 启动端口3000
hot 启用HMR
proxy指定访问 /api 开头URL都代理到 http://127.0.0.1:8000 去。

vscode配置

jsconfig.json是vscode的配置文件,覆盖当前配置。

以上是所有配置文件的解释。拿到这个文件夹后,需要修改name、version、description,需要repository仓库地址,需要修改author、license信息。这些信息修改好之后,就可以开始开发了。

启动项目

在项目根目录,使用$ npm run start 或 $ npm start
在这里插入图片描述
启动成功应该就可以访问了
webpack使用babel转译、打包,较为耗时,需要等一会儿。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值