從零開始搭建React同構應用（二）：瀏覽器端工程化

wwq0327 發布于2019-08-20 14:01 / 3373人閱讀

摘要：從零開始搭建同構應用二項目工程化瀏覽器端在從零開始同構開發一中我們已經能實現基本的配置和編譯了。接下來我們需要將編譯工作工程化。配置作用自動生成自動在引入，。文件內容如下同構開發配置自動刷新這里我們用到的修飾器特性。

從零開始搭建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從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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