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

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

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

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

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

代碼

代碼在這，建議下載后，對照著看，因為文章不方便把所有的代碼貼上來

主要內(nèi)容

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

stylus樣式文件的處理和打包

extract-text-webpack-plugin配置

html-webpack-plugin配置

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

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

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

   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命令，用于開發(fā)環(huán)境的編譯。

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

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

前篇文章我們只編譯了jsx，我們還沒引入樣式，假設(shè)現(xiàn)在項目的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，官方庫中已經(jīng)有人提issue了，。

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

下面看一下樣式文件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"),
]

執(zhí)行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

執(zhí)行watch命令

npm run watch

可以看到webpack幫我們自動生成了html文件。

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




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

配置browser-sync自動刷新

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

以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

執(zhí)行watch命令

`npm run watch`

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

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"
        }),

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

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

使用cross-env來跨平臺設(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",
    }),

云服務(wù)器 GPU云服務(wù)器從零開始搭建前端數(shù)據(jù)監(jiān)控系統(tǒng) 從零開始搭建騰訊云服務(wù)器從零開始 linux從零開始

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81369.html

發(fā)表評論

登陸后可評論

0條評論

wwq0327

男|高級講師

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

TA的文章

tensorflow-lite

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

閱讀 1683·2021-09-29 09:34
手機怎么登錄云主機名-云主機怎么使用？

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評論

0條評論

wwq0327

男|高級講師

TA的文章

tensorflow-lite

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

手機怎么登錄云主機名-云主機怎么使用？

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

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

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

ie9下line-height失效

ES6入門之let、cont

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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