初探React技術棧（一）

neroneroffy 發布于2019-08-26 13:53 / 1491人閱讀

react

最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl

create-react-app

這是官方維護的腳手架應用 我們一般也采用這個

$ npm or cnpm

$ npm install create-react-app -g #全局下載

$ create-react-app #[項目名稱] 新建項目

# 如果想要把 webpack 配置暴露出來 可以執行以下命令
$ npm run eject # 初始時可以在package.json中找到

less/sass

為了提升我們寫樣式的效率 一般采用 less/sass

# less
$ npm i less less-loader

# sass
$ npm i node-sass sass-loader

并在webpack.config.js修改以下配置:

# 添加sass支持
# 找到 file-loader
{
    loader: require.resolve("file-loader"),
    exclude: [/.(js|mjs|jsx|ts|tsx)$/, /.html$/, /.json$/, /.scss$/],
    options: {
    name: "static/media/[name].[hash:8].[ext]",
    },
},
# 在exclude中加上`/.scss$/` 并且在后面加上
{ 
    test: /.scss$/,
    loader: ["node-sass", "sass-loader"]
}

// 添加less支持 這種是省事的寫法 如果需要 antd 的個性化主題定制 請參看下文 antd less 配置
// 找到 `/.css$/` 改成 `/.(?:le|c)ss$/`
// 找到 `getStyleLoaders` 函數 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: cssOptions,
}
// 這樣就完成 less 支持
// 如果想要樣式模塊化那么就需要加上  modules: true
{
    test: cssRegex, // cssRegex這個代表著就是 匹配文件的正則表達式
    exclude: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    modules: true,  //模塊化
    sourceMap: isEnvProduction && shouldUseSourceMap,
    }),
    sideEffects: true,
},

完成對less/sass支持，!注意 樣式模塊化需要不同的文件命名方式 比如  app.scss 模塊化 -> app.module.scss 否則編譯器也不知道那個文件是私有的

配置路徑

一般情況下 我們引入文件都是需要相對路徑但是如果嵌套層級少還可以但是如果層級很多 我們就需要尋找一種辦法幫助我們 來擺脫繁瑣的 ./../......

同樣還是在webpack.config.js 找到alias在其中添加 "@": paths.appSrc

Ant Design

之前一直使用的 vue + element 的布局方式，而這次寫項目則是主要使用 React + Ant Design

不得不說Ant Design整體的動畫以及各種方案讓我耳目一新！天啦嚕這個動畫愛了愛了

# 下載antd
$ npm or cnpm
$ npm i antd --save

首先在全局樣式文件中寫@import "~antd/dist/antd.css";此時就可以看到antd已經引入成功了

根據 Ant Design 官方文檔 推薦其中定制主題介紹了less

所有可定制的less變量

@import "~antd/dist/antd.less"; // 引入官方提供的 less 樣式入口文件
@import "your-theme-file.less"; // 用于覆蓋上面定義的變量

警告根據antd issues 7929中提示 css less 不要都采用less-loader

// 首先在webpack中定義兩種變量
const lessRegex = /.less$/; // 可以找到 `style files regexes` 處聲明
const lessModuleRegex = /.module.less$/;
// 這是為了匹配 .less / .module.less 文件
// 找到 `getStyleLoaders` 函數 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: cssOptions,
}
// 找到 sassModuleRegex 位置處 在對象后加上 以下代碼
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap
    }
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true, // 模塊化
        getLocalIdent: getCSSModuleLocalIdent,
    }
    ),
}

此時還沒有完成 但是less / module.less 但是在改主題色的時候，我們發現會報錯

// 此時需要修改以下代碼
// 找到 `getStyleLoaders` 函數 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: {...cssOptions, javascriptEnabled: true}, // 啟用js編譯。。。
}

相信用scss/sass的同學也不少

// 找到 `getStyleLoaders` 函數 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: {...cssOptions, javascriptEnabled: true, modifyVars: {"primary-color": "#000",}}, // 啟用js編譯。。。
}

然后在index.js 入口文件中引入自定義的全局less文件，并在里面引入~antd/dist/antd.less
然后可以繼續使用scss寫樣式不受影響，雖然這種做法非常雞肋，但是我搜索了幾種方法，但是都不理想，希望有知道更好的方法的大佬告知

鏈接

less/sass to create-react-app
Ant Design

結語

好長時間沒有寫文章了，嗯嗯其實是因為工作忙！！！最近學習的東西也比較多，覺得是一個很好的鞏固，分享的時間，打算就這段時間的學習，寫一個小系列的分享文章，希望有錯誤的地方有大佬能夠不吝賜教！！晚安

GPU云服務器云服務器 webrtc技術初探音視頻技術webrtc初探技術棧全棧技術

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109756.html

初探react技術棧（一）

摘要：相信用的同學也不少找到函數在其中中添加啟用編譯。。。react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or c...

劉玉平 2019-05-23 16:23 評論0 收藏0
面試分享：一年經驗初探阿里巴巴前端社招

摘要：三輪技術面上一輪發揮感覺沒前兩輪發揮好，所以還是有點不自信的，沒想到第三天后，就來電話了，通知我去阿里園區面試。一般阿里社招都是招3-5年的P6+高級工程師，當初自己一年經驗也沒有想過有這個面試機會。雖然沒想著換工作，但是經常關注一些招聘網站的信息，某一天，在某boss上有個人找我，叫我發一下簡歷，我一看是阿里的某技術專家，雖然之前也有阿里的在某boss上給我要簡歷，但是我深知自己...

ACb0y 2019-08-21 11:49 評論0 收藏0
面試分享：一年經驗初探阿里巴巴前端社招

摘要：三輪技術面上一輪發揮感覺沒前兩輪發揮好，所以還是有點不自信的，沒想到第三天后，就來電話了，通知我去阿里園區面試。一般阿里社招都是招3-5年的P6+高級工程師，當初自己一年經驗也沒有想過有這個面試機會。雖然沒想著換工作，但是經常關注一些招聘網站的信息，某一天，在某boss上有個人找我，叫我發一下簡歷，我一看是阿里的某技術專家，雖然之前也有阿里的在某boss上給我要簡歷，但是我深知自己...

wuyumin 2019-08-29 13:07 評論0 收藏0
React 初探

摘要：各個組件維護自己的狀態和，當狀態變更，自動重新渲染整個組件。形式的定義的組件是以的形式來創建的組件的，是目前極為推薦的創建有狀態組件的方式，最終會取代形式相對于可以更好實現代碼復用。組件名稱首字母必須大寫。變量名用包裹，且不能加雙引號。目前在前端開發領域，框架Angular、react和vue占據著主流的地位而且可能會持續比較長的一段時間。三門框架中，從數據綁定機制來看，vue和an...

levy9527 2019-08-21 12:05 評論0 收藏0