长的和vue-cli差不多的React脚手架

alin 发布于2019-08-21 14:27 / 3220人阅读

摘要：的外表，的心说在前面对于我个人来说，一个好的脚手架有助于我们心无旁骛地去学习一些库例如和。所以说，为什么不弄个的呢我的想法就是将和尽量保持一致，除了它们的核心和。并不会对该文件夹下的文件进行处理。

react-webpack-boilerplate

vue-cli的外表，React的心

说在前面

对于我个人来说，一个好的脚手架有助于我们心无旁骛地去学习一些库例如Vue和React。vue-cli就是一个非常好的例子，简单易用，而且集成了许多流行的元素例如ES6和热更新之类的。我之前写了一个小项目就是完全基于这个脚手架来做的，这个开发流程非常的愉悦。当然，在github上面也会有许多现成的react的spa项目模版，但是对于我来说总是觉得多了一些什么或少了一些什么，特别是当我从Vue转到React的时候，会有很多的不习惯。所以说，为什么不弄个React的呢？我的想法就是将vue-cli和react-webpack-boilerplate尽量保持一致，除了它们的核心: Vue和React。

我希望这个spa模版能解决大家在环境配置上遇到的种种问题，也希望习惯于vue-cli的同学能够通过这个模版无缝地接入React。

项目地址

特性

React 15.3.1

JSX

ES6

Webpack

Express dev server

Hot-Reload

Proxy 接口代理

Global-Variable 全局变量，用来区分线上线下环境

使用

可以先将项目clone或者fork下来。

# 安装依赖
npm install

# 测试环境，默认端口: 3000
npm run dev

# 生成项目
npm run build

文档

你可以直接看vue-cli的文档来配置你的项目，但是针对其中的一些使用方法我在这里简述一下。

预处理器

你可以使用你喜欢的css预处理器。例如你需要使用less和sass，那么你需要在./config/index的cssLoaders里面设置：

// ./config/index
module.exports = {
    // set your css loaders
    cssLoaders: ["less", "sass"],
    ...
}

别忘了安装相应的依赖。

处理静态文件

相关的可以看这里。
项目对./static下的静态文件只是简单地进行复制粘贴，所以引入的时候你需要使用相对路径/static/blah.js。webpack并不会对该文件夹下的文件进行处理。

全局变量

整个项目会有一个全局变量process.env，你可以通过它来设置测试环境与生产环境的区别，例子可以看这里。

接口代理

这个是非常有用的工具，可以脱离后端进行开发，后端提供接口就可以了。举个板栗，你项目的端口是3000，后端项目的端口是5000，你需要使用一个叫/api的接口，那么你需要这样子做。

// ./config/index.js
module.exports = {
    ...
    dev: {
        ...
        proxyTable: {
            "/api": {
                target: "local:5000",
                changeOrigin: true
            },
        },
    }
}

酱紫就可以愉快地使用/api接口啦。更多设置看这里。

一些还没有做的事情

[] 各种测试

[] eslint

[] cli

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87912.html

Vuejs自己的构建工具

摘要：然而，这些模板并不限制你自己对于使用的架构组织和选择类库。目前可用的模板包括全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。最近，尤大在和人对喷的时候，悄然放出了一个大招，于是为了追赶他的步伐，赶紧试验了下，并且把原文给大家翻译下。原文地址：Announcing vue-cli 译文源地址： Vuejs自己的构建工具先上原文翻译：最近有很多大量关于Reac...

leoperfect 2019-08-19 17:20 评论0 收藏0
php，vue，vue-ssr 做出来的页面有什么区别？

摘要：静态页面的或者明显最短，原因是模板几乎没什么内容。静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由shirishiyue发表于云+社区专栏目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。好处是没有现阶段...

yibinnn 2019-08-02 12:00 评论0 收藏0
php，vue，vue-ssr 做出来的页面有什么区别？

摘要：静态页面的或者明显最短，原因是模板几乎没什么内容。静态页面生成的白屏时间中，大部分是首屏数据请求消耗的时间，，同时也可以对比出，服务器渲染的对首屏时间的确有很明显的效果。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由shirishiyue发表于云+社区专栏目前我这边的web页面，都是采用php+smarty模板生成的，是一种比较早期的开发模式。好处是没有现阶段常用的...

vpants 2019-04-23 13:11 评论0 收藏0
如何构建大型的前端项目

摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。如何构建大型的前端项目 1. 搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：自动化构建代码，比如打包、压缩、上传等功能本地开发与调试，并有热替换与...

lykops 2019-08-29 16:56 评论0 收藏0
如何构建大型的前端项目

摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。如何构建大型的前端项目 1. 搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：自动化构建代码，比如打包、压缩、上传等功能本地开发与调试，并有热替换与...

plokmju88 2019-08-23 12:18 评论0 收藏0