从零开始搭建React同构应用（二）：浏览器端工程化

wwq0327 发布于2019-08-20 14:01 / 3484人阅读

摘要：从零开始搭建同构应用二项目工程化浏览器端在从零开始同构开发一中我们已经能实现基本的配置和编译了。接下来我们需要将编译工作工程化。配置作用自动生成自动在引入，。文件内容如下同构开发配置自动刷新这里我们用到的修饰器特性。

从零开始搭建React同构应用（二） 项目工程化（浏览器端）

在从零开始React同构开发（一）中我们已经能实现基本的React配置和编译了。接下来我们需要将编译工作工程化。

代码

代码在这，建议下载后，对照着看，因为文章不方便把所有的代码贴上来

主要内容

项目目录结构优化

stylus样式文件的处理和打包

extract-text-webpack-plugin配置

html-webpack-plugin配置

配置browser-sync自动刷新（利用es6的decoratort特性）

项目目录结构优化

先看下整理后的目录结构

</>复制代码 
   src
    ├─config //附加webpack配置文件
    ├─module
    │  ├─common //公共模块
    │  │  └─stylus
    │  ├─index //首页模块
    │  │  ├─component
    │  │  └─stylus
    │  │      └─img
    │  └─TodoDetail //todo详情模块
    │      └─stylus
    └─template //HTML模版

module文件夹放置了各个模块，我把页面以模块分类，每个模块下第一层的.jsx文件就是页面的入口文件（common除外）。

common模块文件夹放置一些公共组件、公共库、公共样式等。

template文件夹用于放置html-webpack-plugin用到的页面模版。

当然我还在探索更好的目录配置方式，大家如果有想法欢迎@我^_^。

添加npm script

我们先添加一条watch命令，用于开发环境的编译。

</>复制代码 
  "scripts": {
    "watch": "webpack -d -w --progress --colors --bs",
    "test-server": "anywhere -p 18341 -d ./build"
  },

样式文件处理 css、stylus文件的处理

前篇文章我们只编译了jsx，我们还没引入样式，假设现在项目的css使用stylus来编写。那么可以参考以下配置。
我们需要3个loader:

stylus-loader

autoprefixer-loader

css-loader

vue-style-loader

file-loader和url-loader

这些loaders大家肯定耳熟能详啦，可能大家会对vue-style-loader会有疑惑，这里解释下：

</>复制代码 
因为在启用sourceMap的情况下，style-loader对background-image属性没有处理好，生成的URL链接开头为chrome:// urls，官方库中已经有人提issue了，。

后来尤雨溪大神fork了官方库后开发了vue-style-loader，完美的解决了background-image问题，当时发现这个库的时候真的感动的不行啊。。。

下面看一下样式文件loader的配置

</>复制代码 
        loaders: [
            {
                test: /.(png|jpe?g|gif)/,
                loader: "url?limit=1024&name=img/[name].[ext]"
            }, {
                test: /.(ttf|eot|svg)$/,
                loader: "url?limit=1024&name=fonts/[name].[ext]"
            },
            {
                test: /.jsx?$/,
                exclude: /node_modules/,
                loader: "babel"
            },
            {
                test: /.(styl|css)$/,
                loader: "vue-style!css?sourceMap!autoprefixer!stylus")
            },
        ]

这样就可以愉快的在js中引入CSS啦

extract-text-webpack-plugin配置

有时候我们需要把CSS提取出来，多带带打包成一个文件，这时候需要用到extract-text-webpack-plugin

修改webpack.config.js

</>复制代码 
const ExtractTextPlugin = require("extract-text-webpack-plugin");

然后修改我们原有的styl-loader配置

</>复制代码 
{
    test: /.(styl|css)$/,
    loader: ExtractTextPlugin.extract(["vue-style"], "css?sourceMap!autoprefixer!stylus")
},

我们还要在plugin字段配置输出的CSS文件名称

</>复制代码 
plugins:[
    new ExtractTextPlugin("css/[name].css"),
]

执行watch命令

</>复制代码 
`npm run watch`

可以看到css都被提取出来成为多带带的文件了。

html-webpack-plugin配置

作用：

自动生成HTML

自动在HTML引入js，css。

自动添加hash。

我们在src/config新建html-webpack-plugin.config.js文件，由于配置HTML编译。

</>复制代码 
//html-webpack-plugin.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = [
    new HtmlWebpackPlugin({
        filename: "index.html",
        chunks: ["common", "index"],
        template: path.resolve(__dirname, "../template/base.html"),
        hash: true,
    }),
]

修改webpack.config.js

执行watch命令

</>复制代码 
npm run watch

可以看到webpack帮我们自动生成了html文件。

index.html文件内容如下：

</>复制代码 
    
    
    React同构开发Demo

配置browser-sync自动刷新

这里我们用到ES7的修饰器特性。目前transform-decorators只有第三方的实现。

以Index.jsx为例

先修改babel.rc文件：

</>复制代码 
{
  "presets": [
    "react",
    "es2015"
  ],
  "plugins": [
    "transform-regenerator",
    "transform-decorators-legacy" //添加这个
  ]
}

在config文件夹添加browser-sync.config.js

修改webpack.config.js

在common文件夹添加bs.js

在React组件中引入bs.js

执行watch命令

</>复制代码 
`npm run watch`

刷新浏览器，看到下图说明自动刷新服务已经成功开启

webapck小技巧

减小路径的书写量

</>复制代码 
resolve: {
    extensions: [".jsx", ".js", ""],
    alias: {
        "common": path.join(__dirname, "module/common")
    }
},

自动引入库，不用每次都写import

</>复制代码 
 new webpack.ProvidePlugin({
            React: "react",
            ReactDOM: "react-dom",
            fetch: "isomorphic-fetch",
            promise: "promise"
        }),

区分生产和开发环境

</>复制代码 
    new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) || JSON.stringify("development"),
    }),

使用cross-env来跨平台设置环境变量

</>复制代码 
  "scripts": {
    "watch": "webpack -d -w --progress --colors --bs",
    "test-server": "anywhere -p 18341 -d ./build",
    "dist": "cross-env NODE_ENV="production" webpack -p"
  }

提取公共js、css

</>复制代码 
    new webpack.optimize.CommonsChunkPlugin({
        name: "common",
        filename: "js/common.js",
    }),

GPU云服务器云服务器从零开始搭建前端数据监控系统从零开始搭建腾讯云服务器从零开始 linux从零开始

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

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

从零开始搭建React同构应用（三）：配置SSR

摘要：从零开始搭建同构应用三配置这篇文章来讲解来配置，我们先从最简单的方法开始，用的方式模拟实现。影响生产环境下执行效率。最后权衡下，还是决定使用现在多一套编译配置的方案。新建，写入以下内容以为例，注意不能少。从零开始搭建React同构应用（三）：配置SSR 这篇文章来讲解来配置server side render，我们先从最简单的方法开始，用cli的方式模拟实现SSR。 demo在这里 ...

jzzlee 2019-08-20 14:03 评论0 收藏0
从零开始搭建React同构应用（四）：搭建Koa Server & 完善SSR

摘要：从零开始搭建同构应用四搭建完善上一篇我们使用了的方式测试了，这篇文章来讲如何在前文的基础上搭建一个，实现真正意义上的。至此，一个简单的框架已经搭建完成，剩下的工作就是结合工作需要，在里面添砖加瓦啦。从零开始搭建React同构应用（四）：搭建Koa Server & 完善SSR 上一篇我们使用了CLI的方式测试了SSR，这篇文章来讲如何在前文的基础上搭建一个Koa Server，实现真...

fizz 2019-08-20 14:05 评论0 收藏0
前端20个灵魂拷问彻底搞明白你就是中级前端工程师【中篇】

摘要：前端个灵魂拷问，彻底搞明白你就是中级前端工程师上篇感觉大家比较喜欢看这种类型的文章，以后会多一些。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。此规范其实是在推广过程中产生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20个灵魂拷问，彻底搞明白你就是中级前端工程师...

MartinDai 2019-08-30 15:44 评论0 收藏0
前端20个灵魂拷问彻底搞明白你就是中级前端工程师【中篇】

摘要：前端个灵魂拷问，彻底搞明白你就是中级前端工程师上篇感觉大家比较喜欢看这种类型的文章，以后会多一些。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。此规范其实是在推广过程中产生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20个灵魂拷问，彻底搞明白你就是中级前端工程师...

coolpail 2019-08-26 10:56 评论0 收藏0
React 服务端渲染如此轻松从零开始构建前后端应用

摘要：今天这篇文章显然不是讨论这两个词语的，我们要尝试使用最新版，构件一个简单的服务端渲染应用。这样取代了完全由客户端渲染前后端分离方式模式。在场景下，我们可以使用自身的完成服务端初次渲染。这也是它在推出短短时间以来，便迅速走红的原因之一。参加或留意了最近举行的JSConf CN 2017的同学，想必对 Next.js 不再陌生， Next.js 的作者之一到场进行了精彩的演讲。其实在更早...

binaryTree 2019-08-20 18:09 评论0 收藏0