使用create-react-app简化前端项目的建立

以往启动一个Web项目,总要从一个现存的项目将gulpfile.js, package.json拷贝至新项目,然后根据需要修改这两个文件,确实挺麻烦的。今天在github上看到一个评分还比较高的项目create-react-app 。细细看了下它的文档,发现facebook通过这个项目将react的前端项目标准化了,约定大于配置,通过这个工具创建项目方便多了,这里记录一下以备忘。

创建项目

执行以下命令:

#安装create-react-app命令
npm install -g create-react-app
#创建一个名为demo1的前端项目
create-react-app demo1
cd demo1
#这里直接启动了开发服务器
npm start

它会自动打开浏览器,并访问http://127.0.0.1:3000

如果修改工程src目录下的文件,则会自动编译,并刷新浏览器。如果出现编译错误,终端及浏览器上均会有提示。

开发设置

在我实际工作中,一般是用java做后台的,因此要配置前端页面的API都代理至后端的Java Web服务器。

修改package.json文件,加入代理设置

1

"proxy": "http://127.0.0.1:8080"

配置SpringMVC处理后台的api请求

<context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/mvc.xml</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/api/*</url-pattern>
</servlet-mapping>

实际开发时,先启动Java Web服务器,再执行npm start启动Web开发服务器,然后就可以开发了。

Java Web应用启用browserHistory

如果前端使用了browserHistory, 则后台还需处理TryFiles的逻辑,TryFilesFilter在web.xml里的配置如下:

<filter>
    <filter-name>TryFiles</filter-name>
    <filter-class>personal.jeremyxu.filter.TryFilesFilter</filter-class>
    <init-param>
        <param-name>files</param-name>
        <param-value>$path /index.html</param-value>
    </init-param>
    <init-param>
        <param-name>excludes</param-name>
        <param-value>/api</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>TryFiles</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

TryFilesFilter的代码见这里

重新组织工程目录结构

在我实际工作中,一般是用java做后台的,因而希望直接将前端代码放到maven的webapp工程里,所以我一般是下面这样组织目录结构的。

demo1/
  src/
    main/
      frontend/
        src/
          js/
            index.js
            actions/
            components/
            constants/
            i18n/
            reducers/
            utils/
          css/
        public/
          index.html
          static/
        package.json
        .gitignore
      java
      webapp
        WEB-INF
  pom.xml

创建一个frontend的目录与java目录平级,这里放置前端源代码。

然后修改maven项目的pom.xml文件,确保打war包能自动编译前端代码,并将编译后的文件打入war包里。

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>1.3.2</version>
    <executions>
        <execution>
            <phase>prepare-package</phase>
            <goals>
                <goal>exec</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <executable>npm</executable>
        <workingDirectory>src/main/frontend</workingDirectory>
        <arguments>
            <argument>run</argument>
            <argument>build</argument>
        </arguments>
    </configuration>
</plugin>

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>3.0.0</version>
    <configuration>
        <webResources>
            <resource>
                <!-- this is relative to the pom.xml directory -->
                <directory>src/main/frontend/build</directory>
                <!-- the default value is ** -->
                <includes>
                    <include>**/*</include>
                </includes>
                <!-- there's no default value for this -->
                <excludes>
                    <exclude>asset-manifest.json</exclude>
                    <exclude>**/*.css.map</exclude>
                    <exclude>**/*.js.map</exclude>
                </excludes>
            </resource>
        </webResources>
    </configuration>
</plugin>

总结

create-react-app快速创建前端项目确实很方便,省去了用gulp、webpack写编译脚本的麻烦,约定大于配置的思想贯彻得挺好的,以后创建新项目就靠你了。

项目完整源码见这里

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

服务器文件同步管理

前几天有台服务器电源坏了,还好数据没有丢。因此必须做好服务器文件内容的备份。服务器主要是用来提供网站服务,带着一个数据库,数据库可以用分发和订阅来解决,网页文件...

98420
来自专栏散尽浮华

centos6下ActiveMQ+Zookeeper消息中间件集群部署记录

由于最近一个项目并发请求压力比较大,所以考虑改进架构,引入消息中间件集群作为一个缓冲消息队列,具体需求: 1)将大量的WebService请求报文发送到mq集群...

32390
来自专栏游戏杂谈

本机web开发环境的搭建--nginx篇

而这篇主要针对的是初接触nginx/web初学者,在公司内部也主要是针对新入职的同事,统一了nginx的相关安装环境(例如:d:\nginx-1.3.11)

12720
来自专栏Java架构师历程

Centos6.5下docker 环境搭建

一.运行docker Linux内核版本需要在3.8以上,针对centos6.5 内核为2.6的系统需要先升级内核.不然会特别卡,退出容器.

79240
来自专栏白驹过隙

Jenkins - 持续集成环境搭建

27750
来自专栏左瞅瞅,右瞅瞅

Mysql5.5——xtrabackup主从同步

192.168.102.128 linux-node1.example.com (主)

16190
来自专栏linux、Python学习

图解CentOS系统启动流程

当我们按下开机键后,系统背后的秘密我们是否了解呢?这里,我带大家探索一下linux系统开机背后的秘密。

10600
来自专栏吴伟祥

eclipse项目导入 原

  File--> New -->Project from Existing Sources。。。(!)

11760
来自专栏康怀帅的专栏

Laravel 环境变量

不同环境加载不同的 .env 文件。 开发: development 测试: testing 预上线: staging 正式环境: producti...

43640
来自专栏AI星球

Struts2基础(1)

1.进入Struts2的官网下载Struts2安装包:http://struts.apache.org

10510

扫码关注云+社区

领取腾讯云代金券