React项目构建

React项目配置文件与启动详解

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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值