初見React，一步一個坑

Va007發表於2018-06-06
React
說在前頭：新入職公司，react還不是很熟悉，就開始了官網重構的專案，剛開始開發速度很慢，而且語法也很多不規範的地方，在這裡總結一下開發中遇到的坑。

No.1? React專案引入圖片，less，css等報錯

手動搭建的webpack專案，最初你可能很多loader都沒有裝！

所以你需要裝一下各種loader，比如style-loader，css-loader，url-loader

在
build/webpack.base.js中module的rules下新增：

{
   test: /\.css$/,
   loader: 'style-loader!css-loader',
   exclude: [
      path.resolve(__dirname, '../node_modules')
   ]
},
{
   test: /\.(png|jpg|gif|jpeg)$/,
   loader: 'url-loader?limit=8192',
   exclude: [
      path.resolve(__dirname, '../node_modules')
   ]
 }複製程式碼

這樣就可以引入圖片，CSS了，之前一直用腳手架搭建專案，完全不知道連這些最基本的引入都要配置loader……

No.2 ? React專案引入圖片的方式

不就是引入個圖片嗎，我上來就

<img src="../../assets/logo.png" alt="." />複製程式碼

結果發現初見React，一步一個坑，咋回事呢？

上網一查，發現原因是React和ES6關係密切，而es6不支援在<img />標籤內直接寫圖片的路徑，那咋整呢？？

  1. import 方式：

    import logo from '../../assets/logo.png'

<img src={logo} alt="" />
複製程式碼
  2. require方式：

    <img src={require('../../assets/logo.png')} alt="" />複製程式碼

No.3 ? node_modules裡的檔案載入失敗，比如引入Antd，Katex外掛時報錯

這是因為第一個坑還沒填完，再來看看剛才是怎麼寫的：

初見React，一步一個坑

看見那個exclude沒，排除！這些loader把node_modules裡的檔案都拋棄不管了，能不報錯麼，所以要刪除這句話，並在你需要用到loader的npm包所對應的資料夾目錄，新增“白名單”，如下：

初見React，一步一個坑

這樣就會使NPM包裡的檔案正常載入了。

No.4 ? 引入iconfont本地檔案失敗

剛開始在app.js中引入會無法生效

初見React，一步一個坑

不都是裝好各種loader了麼，還想咋滴呀？

原來這些都是打包後的檔案！為了使打包後的樣式生效，需要使用extract-text-webpack-plugin外掛，將樣式檔案單獨打包，打包輸出的檔案由配置檔案中的output屬性指定。

Webpack將所有靜態資源都認為是模組，比如CSS，LESS，JSX，圖片，字型等等，從而可以對其進行統一管理。為此Webpack引入了loader（載入器）和ExtractTextPlugin外掛。

外掛和loader功能差不多，都是檔案處理程式，但和loader不同，它不是針對特定型別檔案的處理程式，而是在打包的整個過程這個更大的維度上起作用的處理程式。比如，js壓縮外掛UglifyJsPlugin就是把打包後的js程式碼進行壓縮。（此處引用CSDN博主doomliu）

不多BB，看看怎麼用吧！

初見React，一步一個坑

這樣就可以在專案中正常引用了，（還是需要在app.js中引入的哦）

No.5 ? 最好不要用Marterial-UI

為啥?因為這個UI庫的所有元件都是內聯的樣式！內聯啊！這樣你就沒辦法改樣式了。連個class都沒有。

大力推薦Antd，中國的，阿里的，沒毛病。

關於Antd，推薦用babel-plugin-import按需引入，節省效能，非常方便

首先cnpm i babel-plugin-import --save-dev

然後修改 .babelrc檔案

{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 會載入 less 檔案
  ]
}複製程式碼

然後就可以直接這麼用

初見React，一步一個坑

否則你得這麼寫：

初見React，一步一個坑

No.6 ? 關於ESlint。。。

經常被ESlint搞的很無語，有些莫名其妙的要求，比如我開發過程中建立個標籤，裡面是空的就報錯，大哥，我不得一步一步來麼，急啥，所以就想要把這條無禮的限制給去掉！

在安裝ESlint之後，.eslintrc 檔案會在你的資料夾中自動建立。你可以在 .eslintrc 檔案中看到許多像這樣的規則：

初見React，一步一個坑

其實簡單寫法就是：

"no-console": [0],複製程式碼

0為關閉規則，1為視為警告，2為視為錯誤

此外，如果你引入一個外部的js檔案，但是裡面有好幾百個錯誤，，你又不想改，咋辦呢？

在根目錄下新建一個.eslintignore，搞定！

初見React，一步一個坑

No.7 ? 判斷360瀏覽器

現在360瀏覽器越來越不好分辨了，360瀏覽器某次更新後，核心顯示的字串已經和IE瀏覽器是一樣的了,但是有時候它還是會有IE都沒有的bug……

is360() {
    //application/vnd.chromium.remoting-viewer 可能為360特有
    let is360 = _mime('type', 'application/vnd.chromium.remoting-viewer')
    if (isChrome() && is360) {
      return true    //是360瀏覽器
    }
    //檢測是否是谷歌核心(可排除360及谷歌以外的瀏覽器)
    function isChrome() {
      let ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('chrome') > 1
    }
    //測試mime
    function _mime(option, value) {
      var mimeTypes = navigator.mimeTypes
      for (var mt in mimeTypes) {
        if (mimeTypes[mt][option] === value) {
          return true
        }
      }
      return false
    }
 }複製程式碼

One more little thing……

初見React，一步一個坑

現在專案開發完成了，我唯一的感覺就是我需要多看看書，多刷刷官方文件，對於React我只掌握了皮毛的毛，皮都沒到呢。還有就是Webpack，必須系統的學習一下！

學無止境！


相關文章