初見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和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插件時報錯

這是由於第一個坑還沒填完，再來看看剛纔是怎麼寫的：

看見那個exclude沒，排除！這些loader把node_modules裏的文件都拋棄無論了，能不報錯麼，因此要刪除這句話，並在你須要用到loader的npm包所對應的文件夾目錄，添加「白名單」，以下：

這樣就會使NPM包裏的文件正常加載了。

No.4 🕳 引入iconfont本地文件失敗

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

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

原來這些都是打包後的文件！爲了使打包後的樣式生效，須要使用extract-text-webpack-plugin插件，將樣式文件單獨打包，打包輸出的文件由配置文件中的output屬性指定。

Webpack將全部靜態資源都認爲是模塊，好比CSS，LESS，JSX，圖片，字體等等，從而能夠對其進行統一管理。爲此Webpack引入了loader（加載器）和ExtractTextPlugin插件。

插件和loader功能差很少，都是文件處理程序，但和loader不一樣，它不是針對特定類型文件的處理程序，而是在打包的整個過程這個更大的維度上起做用的處理程序。好比，js壓縮插件UglifyJsPlugin就是把打包後的js代碼進行壓縮。（此處引用CSDN博主doomliu）

很少BB，看看怎麼用吧！

這樣就能夠在項目中正常引用了，（仍是須要在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 文件
  ]
}複製代碼

而後就能夠直接這麼用

不然你得這麼寫：

No.6 🕳 關於ESlint。。。

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

在安裝ESlint以後，.eslintrc 文件會在你的文件夾中自動建立。你能夠在 .eslintrc 文件中看到許多像這樣的規則：

其實簡單寫法就是：

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

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

此外，若是你引入一個外部的js文件，可是裏面有好幾百個錯誤，，你又不想改，咋辦呢？

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

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我只掌握了皮毛的毛，皮都沒到呢。還有就是Webpack，必須系統的學習一下！

學無止境！