初见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，必须系统的学习一下！

学无止境！