初探react技術棧（一）

時間 2019-12-10

標籤初探 react 技術欄目 React 简体版

原文原文鏈接

react

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

create-react-app

這是官方維護的腳手架應用咱們通常也採用這個css

$ npm or cnpm

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

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

# 若是想要把 webpack 配置暴露出來 能夠執行如下命令
$ npm run eject # 初始時能夠在package.json中找到
複製代碼

less/sass

爲了提高咱們寫樣式的效率通常採用 less/sasshtml

# less
$ npm i less less-loader

# sass
$ npm i node-sass sass-loader
複製代碼

並在webpack.config.js修改如下配置:vue

# 添加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 不然編譯器也不知道那個文件是私有的java

配置路徑

通常狀況下咱們引入文件都是須要相對路徑可是若是嵌套層級少還能夠可是若是層級不少咱們就須要尋找一種辦法幫助咱們來擺脫繁瑣的 ./../......node

一樣仍是在webpack.config.js 找到alias在其中添加 '@': paths.appSrcreact

Ant Design

以前一直使用的 vue + element 的佈局方式，而此次寫項目則是主要使用 React + Ant Designwebpack

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

# 下載antd
$ npm or cnpm
$ npm i antd --save 
複製代碼

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

根據 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編譯。。。
}
複製代碼