從零開始搭建React同構(gòu)應(yīng)用（二）：瀏覽器端工程化

wwq0327 發(fā)布于2019-08-20 14:01 / 3378人閱讀

摘要：從零開始搭建同構(gòu)應(yīng)用二項(xiàng)目工程化瀏覽器端在從零開始同構(gòu)開發(fā)一中我們已經(jīng)能實(shí)現(xiàn)基本的配置和編譯了。接下來我們需要將編譯工作工程化。配置作用自動(dòng)生成自動(dòng)在引入，。文件內(nèi)容如下同構(gòu)開發(fā)配置自動(dòng)刷新這里我們用到的修飾器特性。

從零開始搭建React同構(gòu)應(yīng)用（二） 項(xiàng)目工程化（瀏覽器端）

在從零開始React同構(gòu)開發(fā)（一）中我們已經(jīng)能實(shí)現(xiàn)基本的React配置和編譯了。接下來我們需要將編譯工作工程化。

代碼

代碼在這，建議下載后，對(duì)照著看，因?yàn)槲恼虏环奖惆阉械拇a貼上來

主要內(nèi)容

項(xiàng)目目錄結(jié)構(gòu)優(yōu)化

stylus樣式文件的處理和打包

extract-text-webpack-plugin配置

html-webpack-plugin配置

配置browser-sync自動(dòng)刷新（利用es6的decoratort特性）

項(xiàng)目目錄結(jié)構(gòu)優(yōu)化

先看下整理后的目錄結(jié)構(gòu)

   src
    ├─config //附加webpack配置文件
    ├─module
    │  ├─common //公共模塊
    │  │  └─stylus
    │  ├─index //首頁(yè)模塊
    │  │  ├─component
    │  │  └─stylus
    │  │      └─img
    │  └─TodoDetail //todo詳情模塊
    │      └─stylus
    └─template //HTML模版

module文件夾放置了各個(gè)模塊，我把頁(yè)面以模塊分類，每個(gè)模塊下第一層的.jsx文件就是頁(yè)面的入口文件（common除外）。

common模塊文件夾放置一些公共組件、公共庫(kù)、公共樣式等。

template文件夾用于放置html-webpack-plugin用到的頁(yè)面模版。

當(dāng)然我還在探索更好的目錄配置方式，大家如果有想法歡迎@我^_^。

添加npm script

我們先添加一條watch命令，用于開發(fā)環(huán)境的編譯。

  "scripts": {
    "watch": "webpack -d -w --progress --colors --bs",
    "test-server": "anywhere -p 18341 -d ./build"
  },

樣式文件處理 css、stylus文件的處理

前篇文章我們只編譯了jsx，我們還沒引入樣式，假設(shè)現(xiàn)在項(xiàng)目的css使用stylus來編寫。那么可以參考以下配置。
我們需要3個(gè)loader:

stylus-loader

autoprefixer-loader

css-loader

vue-style-loader

file-loader和url-loader

這些loaders大家肯定耳熟能詳啦，可能大家會(huì)對(duì)vue-style-loader會(huì)有疑惑，這里解釋下：

因?yàn)樵趩⒂?b>sourceMap的情況下，style-loader對(duì)background-image屬性沒有處理好，生成的URL鏈接開頭為chrome:// urls，官方庫(kù)中已經(jīng)有人提issue了，。

后來尤雨溪大神fork了官方庫(kù)后開發(fā)了vue-style-loader，完美的解決了background-image問題，當(dāng)時(shí)發(fā)現(xiàn)這個(gè)庫(kù)的時(shí)候真的感動(dòng)的不行啊。。。

下面看一下樣式文件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配置

有時(shí)候我們需要把CSS提取出來，多帶帶打包成一個(gè)文件，這時(shí)候需要用到extract-text-webpack-plugin

修改webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");

然后修改我們?cè)械?b>styl-loader配置

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

我們還要在plugin字段配置輸出的CSS文件名稱

plugins:[
    new ExtractTextPlugin("css/[name].css"),
]

執(zhí)行watch命令

`npm run watch`

可以看到css都被提取出來成為多帶帶的文件了。

html-webpack-plugin配置

作用：

自動(dòng)生成HTML

自動(dòng)在HTML引入js，css。

自動(dòng)添加hash。

我們?cè)?b>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

執(zhí)行watch命令

npm run watch

可以看到webpack幫我們自動(dòng)生成了html文件。

index.html文件內(nèi)容如下：




    
    
    React同構(gòu)開發(fā)Demo

配置browser-sync自動(dòng)刷新

這里我們用到ES7的修飾器特性。目前transform-decorators只有第三方的實(shí)現(xiàn)。

以Index.jsx為例

先修改babel.rc文件：

{
  "presets": [
    "react",
    "es2015"
  ],
  "plugins": [
    "transform-regenerator",
    "transform-decorators-legacy" //添加這個(gè)
  ]
}

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

修改webpack.config.js

在common文件夾添加bs.js

在React組件中引入bs.js

執(zhí)行watch命令

`npm run watch`

刷新瀏覽器，看到下圖說明自動(dòng)刷新服務(wù)已經(jīng)成功開啟

webapck小技巧

減小路徑的書寫量

resolve: {
    extensions: [".jsx", ".js", ""],
    alias: {
        "common": path.join(__dirname, "module/common")
    }
},

自動(dòng)引入庫(kù)，不用每次都寫import

 new webpack.ProvidePlugin({
            React: "react",
            ReactDOM: "react-dom",
            fetch: "isomorphic-fetch",
            promise: "promise"
        }),

區(qū)分生產(chǎn)和開發(fā)環(huán)境

    new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) || JSON.stringify("development"),
    }),

使用cross-env來跨平臺(tái)設(shè)置環(huán)境變量

  "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云服務(wù)器云服務(wù)器從零開始搭建前端數(shù)據(jù)監(jiān)控系統(tǒng) 從零開始搭建騰訊云服務(wù)器從零開始 linux從零開始

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81369.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wwq0327

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow-lite

閱讀 1554·2023-04-25 18:56
單片機(jī)的一些入門知識(shí)與學(xué)習(xí)資料

閱讀 1499·2021-09-29 09:34
手機(jī)怎么登錄云主機(jī)名-云主機(jī)怎么使用？

閱讀 1717·2021-09-22 15:51
CubeCloud：中秋國(guó)慶促銷，全站88折優(yōu)惠，洛杉磯聯(lián)通AS4837線路云服務(wù)器限時(shí)優(yōu)惠30元/

閱讀 3520·2021-09-14 18:03
ZJI新上韓國(guó)BGP+CN2服務(wù)器,8折月付440元起

閱讀 1173·2021-07-23 17:54
transform導(dǎo)致的border-radius失效

閱讀 2031·2019-08-29 18:38
ie9下line-height失效

閱讀 2911·2019-08-29 12:38
ES6入門之let、cont

閱讀 619·2019-08-26 13:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

從零開始搭建React同構(gòu)應(yīng)用（二）：瀏覽器端工程化

相關(guān)文章

**從零開始搭建React同構(gòu)應(yīng)用（三）：配置SSR**

**從零開始搭建React同構(gòu)應(yīng)用（四）：搭建Koa Server & 完善SSR**

前端20個(gè)靈魂拷問徹底搞明白你就是中級(jí)前端工程師【中篇】

前端20個(gè)靈魂拷問徹底搞明白你就是中級(jí)前端工程師【中篇】

***React* 服務(wù)端渲染如此輕松從零開始構(gòu)建前后端*應(yīng)用***

發(fā)表評(píng)論

0條評(píng)論

wwq0327

男|高級(jí)講師

TA的文章

tensorflow-lite

單片機(jī)的一些入門知識(shí)與學(xué)習(xí)資料

手機(jī)怎么登錄云主機(jī)名-云主機(jī)怎么使用？

CubeCloud：中秋國(guó)慶促銷，全站88折優(yōu)惠，洛杉磯聯(lián)通AS4837線路云服務(wù)器限時(shí)優(yōu)惠30元/

ZJI新上韓國(guó)BGP+CN2服務(wù)器,8折月付440元起

transform導(dǎo)致的border-radius失效

ie9下line-height失效

ES6入門之let、cont

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

從零開始搭建React同構(gòu)應(yīng)用（二）：瀏覽器端工程化

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！