详解使用create-皇牌天下投注网react-app快速构建

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:105 发布时间:2019-05-10
摘要:最近在学react,然后感觉自己之前用的express gulp webpack ejs的工作环境还是基于html js css这种三层架构的应用,完全跟react不是一回事。 皇牌天下投注网,最近在折腾react开发,总结一个

最近在学react,然后感觉自己之前用的express gulp webpack ejs的工作环境还是基于html js css这种三层架构的应用,完全跟react不是一回事。

皇牌天下投注网,最近在折腾react开发,总结一个react环境搭建的教程,写得比较细碎,基本上就是自己的搭建步骤了,希望能够帮助到有需要的小伙伴。

愚蠢的我居然在原先的这个环境上又搭建了react的环境。好吧,写是能写,但是作为服务端的架构就显得驴唇不对马嘴。不免对环境的配置感到迷茫。我也知道redux,但是才刚学react,react还没熟,暂时还不想了解那个框架,然后我发现了create-react-app。

常用的脚手架

可以用这个直接为自己搭建脚手架,方便的eb,这里记录一下

  1. react-boilerplate
  2. react-redux-starter-kit
  3. create-react-app(git上关注量最大)

首先安装这个包

使用 create-react-app 快速构建 React 开发环境

npm install -g create-react-app

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

然后就跟用express “appname”一样,键入

create-react-app 自动创建的项目是基于 Webpack ES6 。

create-react-app appname

执行以下命令创建项目:

来创建新的项目。比如我创建的名为“react-learn-1”的项目目录如下。

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

皇牌天下投注网 1

tips:

其中之前习惯放在根目录下的webpack构建配置文件被放在了node_modules下的react-scripts中。好像是因为觉得构建配置文件都大同小异,于是就直接藏起来了,到时候有一些小需求的时候可以去改。

如果使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

创建成功之后它会告诉你怎么启动项目

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

如何编译less

ok,就这么简单

1.暴露出配置文件

npm run eject

2.安装less-loader 和less

npm install less-loader less --save-dev

3.修改webpack 配置

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

test: /.css$/ 改为 /.(css|less)$/

在这个test的下面找到use,添加loader

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

好了 重新运行项目 less已经编译了

项目结构

src目录

src目录用来存放我们自己的代码,可以在src下面创建子目录,只有src根目录下的文件会被webpack编译,所以必须把文件放在src根目录下,否则不会识别。

public目录

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:详解使用create-皇牌天下投注网react-app快速构建

关键词:

最火资讯