初见React,一步一个坑

3,683 阅读4分钟
说在前头:新入职公司,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,必须系统的学习一下!

学无止境!