React项目
项目依赖安装
将项目开发基础文件 react-mobx-starter-master.zip 解压缩,并用这个目录作为项目根目录。
在项目根目录中,执行下面的命令,就会自动按照package.json的配置安装依赖模块。
$ 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": "webpack -p --config webpack.config.prod.js"
}
start 指定启动webpack的dev server开发用WEB Server,主要提供2个功能:静态文件支持、自动刷新和热替换
HMR(Hot Module replacement)。
–hot 启动HMR
HRM可以在应用程序运行中替换、添加、删除模块,而无需重载页面,只把变化部分替换掉。不使用HMR则自动刷新会导致这个页面刷新。
–inline 默认模式,使用HMR的时候建议开启inline模式。热替换时会有消息显示在控制台。
build 使用webpack构建打包。对应
$ npm run build
项目依赖
devDependencies 开发时依赖,不会打包到目标文件中。对应 npm install xxx --save-dev 。例如babel的一些依赖,只是为了帮我们转译代码,没有必要发布到生产环境中。
dependencies 运行时依赖,会打包到项目中。对应 npm install xxx --save 。
版本号指定:
版本号 ,只安装指定版本号的
~版本号 ,例如 ~1.2.3 表示安装1.2.x中最新版本,不低于1.2.3,但不能安装1.3.x
^版本号 ,例如 ^2.4.1 表示安装2.x.x最新版本不低于2.4.1
latest ,安装最新版本
css样式相关的包括:
css-loader、less、less-loader、style-loader
react-hot-loader react热加载插件,希望改动保存后,直接在页面上直接反馈出来,不需要手动刷新。
source-map 文件打包,js会合并或者压缩,没法调试,用它来看js原文件是什么。 source-map-loader也需要webpack的 loader
webpack-dev-server 启动一个开发时用的server
react 开发的主框架
react-dom 支持DOM
babel配置
.babelrc babel转译的配置文件
{
"presets": [
"react",
"env",
"stage-0"
],
"plugins": [
"transform-decorators-legacy",
"transform-runtime",
"react-hot-loader/babel"
]
}
entry入口
描述入口。通常是src里的index.js文件
如果是一个数组,数组中每一项都会执行,里面包含入口文件,另一个参数可以用来配置一个服务器,我们这里配置的是热加载插件,可以自动刷新。
加载器:
style-loader通过 <style> 标签把css添加到DOM中
css-loader 加载css
less-loader 对less的支持
(从下往上写)
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
LESS
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
编译输出到文件
$ node_modules/.bin/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,
pathRewrite: {'^/api':''}
}
}
}
};
compress 启动gzip
port 启动端口3000
hot 启用HMR
proxy指定访问 /api 开头URL都代理到 http://127.0.0.1:8000 去。
启动项目
在项目根目录,使用
$ npm start
启动成功应该就可以访问 http://127.0.0.1:3000/