webpack编译react需要注意哪些细节


今天小编给大家分享一下webpack编译react需要注意哪些细节的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中,一定要注意一个细节,那就是webpack和babel-loader的安装位置。react安装当然,使用react必须先安装react和react-dom,其安装方式很简单(前提是我们必须安装有npm)。# npm install react react-dom –savereact安装就这样简单,其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。react解析器babel安装babel安装的位置是我们这篇文章的目的。babel有两种安装的位置:一种是全局安装,一种是本地安装——也就是安装在项目目录下的node_modules下。# npm install babel-core babel-loader babel-preset-react –save-dev
//本地安装
#npm install babel-core babel-loader babel-preset-react –g
//全局安装一般情况下我们选择本地安装,这样便于管理。打包工具webpack的安装同样,webpack的安装位置也是这篇文章描述的所要注意的点。当然,它也有两种安装的位置:全局安装和本地安装。# npm install webpack –save-dev
//本地安装
# npm install webpack –g
//全局安装如果选择本地安装,那么在使用的时候较麻烦一些,我们需要在命令前加上路径。所以一般情况下都是全局安装,这样就可以在任意位置直接使用。这里我们选择全局安装。这样才能出现我们将要说的问题。webpack配置文件编写安装完webpack以后,下面来编写webpack配置文件webpack.config.js。这里我不写全部,只写加载loader部分。代码一module:{
loaders: [
{
test: /.js$/,
loader: ‘babel’,
query:{
presets:[‘react’]
}
}
]
}编译过程中出现的错误好了,到了关键的地方了。现在我们整个系统的配置是这样的:babel安装到本地,webpack安装到全局位置,webpack配置文件如代码一所示。接下来我们就要编译打包我们的项目。# webpack执行该命令以后,你会发现出现如下的错误:ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Module build failed: Error: Couldn’t find preset “react” relative to directory “/node/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/process”
……这也就是说找不到 香港云主机babel-preset-react。好了,说了这么多终于在这里引出了我们将要讨论的问题(这里大家不要嫌我啰嗦,为什么出现这种问题,其原因总要弄清楚。什么样的配置会出现这种问题,了解以后才容易上手解决)。解决问题的方式出现上述问题以后,我们有这样三种方式可以解决。方式一要解决这个问题很简单。我们知道,出现这个问题是因为bable和webpack安装的位置不同,所以找不到babel-preset-react。因为在配置文件中有这样一段代码。query:{
presets:[‘react’]
}好了,既然知道是安装位置不同,那我们可以将babel安装在全局位置,这样这个问题不就解决了吗。#npm remove babel-core babel-loader babel-preset-react –save-dev
//首先移除原先安装的babel
#npm install babel-core babel-loader babel-preset-react –g
//全局安装没错,问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理,所以还是使用其他的方式。方式二此种方式和方式一大同小异。方式一是改变babel的安装位置,而这里是改变webpack的安装位置。原先webpack是安装到全局位置的,所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。# npm remove webpack –g
//移除原先的webpack
# npm install webpack –save-dev
//将webpack安装到本地位置——也就是项目目录下的node_modules中
# ln –s /项目根目录/node_modules/webpack/bin/webpack.js /usr/bin/webpack
//为了使用webpack方便,在这里我们在/usr/bin目录下建立软连接(也就是快捷方式)
//这样我们就可以在任意位置直接使用webpack命令了。此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。此种方式较方式一,我个人比较推荐这种方式,这样比较方便管理。但是,这种方式也不是没有弊端。如果我们有多个项目,那我们就需要在每个项目下都安装webpack,那岂不是很麻烦。所以这种方式也不是很好。方式三该方式应该说是最值得推荐的,因为不需要改变webpack和babel的安装位置。webpack还是在全局位置,babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件,在代码一的基础上添加一句代码。代码二module:{
loaders: [
{
test: /.js$/,
loader: ‘babel’,
exclude:/node_modules/,
query:{
presets:[‘react’]
}
}
]
}以上就是“webpack编译react需要注意哪些细节”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注开发云行业资讯频道。

相关推荐: Win7怎么设置网络打印机管理权限

这篇文章给大家分享的是有关Win7怎么设置网络打印机管理权限的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。打印机是我们日常办公中经常需要用到的工具。而打印机的共享,也成为我们经常需要用到的一项功能,当然为了管理方便,我们也需要在安装…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/15 11:29
下一篇 07/15 11:30

相关推荐