引入react文件报错_初见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项目引入图片的方式

不就是引入个图片吗，我上来就

复制代码

结果发现

，咋回事呢？

上网一查，发现原因是React和ES6关系密切，而es6不支持在标签内直接写图片的路径，那咋整呢？？import 方式：

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

复制代码

require方式：

复制代码

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 🕳 最好不要用

为啥?因为这个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，必须系统的学习一下！

学无止境！