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

資訊專欄INFORMATION COLUMN

初探react技術(shù)棧（一）

劉玉平 / 625人閱讀

摘要：相信用的同學(xué)也不少找到函數(shù)在其中中添加啟用編譯。。。

react

最近已經(jīng)開(kāi)始使用react技術(shù)棧了，從頭開(kāi)始搭建項(xiàng)目，有必要的記錄一下配置的過(guò)程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語(yǔ)言react-intl

create-react-app 
這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個(gè)


$ npm or cnpm

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

$ create-react-app #[項(xiàng)目名稱] 新建項(xiàng)目

# 如果想要把 webpack 配置暴露出來(lái) 可以執(zhí)行以下命令
$ npm run eject # 初始時(shí)可以在package.json中找到
less/sass 
為了提升我們寫(xiě)樣式的效率 一般采用 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支持 這種是省事的寫(xiě)法 如果需要 antd 的個(gè)性化主題定制 請(qǐng)參看下文 antd less 配置
// 找到 `/.css$/` 改成 `/.(");
// 找到 `getStyleLoaders` 函數(shù) 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: cssOptions,
}
// 這樣就完成 less 支持
// 如果想要樣式模塊化那么就需要加上  modules: true
{
    test: cssRegex, // cssRegex這個(gè)代表著就是 匹配文件的正則表達(dá)式
    exclude: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    modules: true,  //模塊化
    sourceMap: isEnvProduction && shouldUseSourceMap,
    }),
    sideEffects: true,
},

完成對(duì)less/sass支持，!注意 樣式模塊化需要不同的文件命名方式 比如  app.scss 模塊化 -> app.module.scss 否則編譯器也不知道那個(gè)文件是私有的
配置路徑 
一般情況下 我們引入文件都是需要相對(duì)路徑但是如果嵌套層級(jí)少還可以但是如果層級(jí)很多 我們就需要尋找一種辦法幫助我們 來(lái)擺脫繁瑣的 ./../......

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

Ant Design 

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

不得不說(shuō)Ant Design整體的動(dòng)畫(huà)以及各種方案讓我耳目一新！天啦嚕這個(gè)動(dòng)畫(huà) 愛(ài)了 愛(ài)了

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

首先在全局樣式文件中寫(xiě)@import "~antd/dist/antd.css";此時(shí)就可以看到antd已經(jīng)引入成功了

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

所有可定制的less變量

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

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


// 首先在webpack中定義兩種變量
const lessRegex = /.less$/; // 可以找到 `style files regexes` 處聲明
const lessModuleRegex = /.module.less$/;
// 這是為了匹配 .less / .module.less 文件
// 找到 `getStyleLoaders` 函數(shù) 在其中 loaders 中添加
{
    loader: require.resolve("less-loader"),
    options: cssOptions,
}
// 找到 sassModuleRegex 位置處 在對(duì)象后加上 以下代碼
{
    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,
    }
    ),
}

此時(shí)還沒(méi)有完成 但是less / module.less 但是在改主題色的時(shí)候，我們發(fā)現(xiàn)會(huì)報(bào)錯(cuò)



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

相信用scss/sass的同學(xué)也不少


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

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

鏈接

less/sass to create-react-app
Ant Design

結(jié)語(yǔ)

好長(zhǎng)時(shí)間沒(méi)有寫(xiě)文章了，嗯嗯 其實(shí)是因?yàn)楣ぷ髅Γ。。∽罱鼘W(xué)習(xí)的東西也比較多，覺(jué)得是一個(gè)很好的鞏固，分享的時(shí)間，打算就這段時(shí)間的學(xué)習(xí)，寫(xiě)一個(gè)小系列的分享文章，希望有錯(cuò)誤的地方有大佬能夠不吝賜教??！晚安

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

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

相關(guān)文章

  • 初探React技術(shù)棧（一）

    react 最近已經(jīng)開(kāi)始使用react技術(shù)棧了，從頭開(kāi)始搭建項(xiàng)目，有必要的記錄一下配置的過(guò)程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語(yǔ)言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個(gè) $ npm or cnpm $ npm install create-react...

    neroneroffy 評(píng)論0 收藏0

  • 面試分享：一年經(jīng)驗(yàn)初探阿里巴巴前端社招

    摘要：三輪技術(shù)面上一輪發(fā)揮感覺(jué)沒(méi)前兩輪發(fā)揮好，所以還是有點(diǎn)不自信的，沒(méi)想到第三天后，就來(lái)電話了，通知我去阿里園區(qū)面試。 一般阿里社招都是招3-5年的P6+高級(jí)工程師，當(dāng)初自己一年經(jīng)驗(yàn)也沒(méi)有想過(guò)有這個(gè)面試機(jī)會(huì)。 雖然沒(méi)想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天，在某boss上有個(gè)人找我，叫我發(fā)一下簡(jiǎn)歷，我一看是阿里的某技術(shù)專家，雖然之前也有阿里的在某boss上給我要簡(jiǎn)歷，但是我深知自己...

    ACb0y 評(píng)論0 收藏0

  • 面試分享：一年經(jīng)驗(yàn)初探阿里巴巴前端社招

    摘要：三輪技術(shù)面上一輪發(fā)揮感覺(jué)沒(méi)前兩輪發(fā)揮好，所以還是有點(diǎn)不自信的，沒(méi)想到第三天后，就來(lái)電話了，通知我去阿里園區(qū)面試。 一般阿里社招都是招3-5年的P6+高級(jí)工程師，當(dāng)初自己一年經(jīng)驗(yàn)也沒(méi)有想過(guò)有這個(gè)面試機(jī)會(huì)。 雖然沒(méi)想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天，在某boss上有個(gè)人找我，叫我發(fā)一下簡(jiǎn)歷，我一看是阿里的某技術(shù)專家，雖然之前也有阿里的在某boss上給我要簡(jiǎn)歷，但是我深知自己...

    wuyumin 評(píng)論0 收藏0

  • React 初探

    摘要：各個(gè)組件維護(hù)自己的狀態(tài)和，當(dāng)狀態(tài)變更，自動(dòng)重新渲染整個(gè)組件。形式的定義的組件是以的形式來(lái)創(chuàng)建的組件的，是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代形式相對(duì)于可以更好實(shí)現(xiàn)代碼復(fù)用。組件名稱首字母必須大寫(xiě)。變量名用包裹，且不能加雙引號(hào)。 目前在前端開(kāi)發(fā)領(lǐng)域，框架Angular、react和vue占據(jù)著主流的地位而且可能會(huì)持續(xù)比較長(zhǎng)的一段時(shí)間。三門(mén)框架中，從數(shù)據(jù)綁定機(jī)制來(lái)看，vue和an...

    levy9527 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<