全国咨询热线:18720358503

分类信息小程序_Webpack 4.x搭建react开发环境的方法

类别:企业动态 发布时间:2021-01-08 浏览人次:

Webpack 4.x搭建react开发环境的方法步骤       这篇文章主要介绍了Webpack 4.x搭建react开发环境的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记

必要依赖一览(npm install) 安装好。

"dependencies": {
 "babel-core": "^6.26.3",
 "babel-loader": "^7.1.5",
 "babel-preset-env": "^1.7.0",
 "react": "^16.4.2",
 "react-dom": "^16.4.2",
 "webpack": "^4.16.5"
}

babel系列是干什么用的呢?是为了支持es6以上的高级语法的编译。但是因为react有jsx这个东西存在,所以单纯的babel是不够的,此外要让babel作用于webpack,需要给webpack添加一个loader(以前版本叫loader,4.x版本开始改用‘rules'),在工程根目录新建webpack.config.js文件,并添加如下代码:

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var de凡科抠图 = [ 
//以上代码可以忽略,没有必要不要添加noParse,因为依赖代码中可能会有环境的判断,而浏览器中是拿不到process变量的,会报错!
var config = {
 //这里是打包的入口
 entry: path.resolve(__dirname, './react/app.js'),
 resolve: {
 alias: {
 //打包完成后输出到./build/bundle.js文件中
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 mode: 'development',
 module: {
 //上述的规则,loader就放在这里,这段没什么好说的,从Webpack官方文档上直接拿来用
 rules: [
 test: /\.js$/,
 exclude: /(ponents)/,
 use: {
 loader: 'babel-loader',
 options: {
 //刚刚下载的module之一
 presets: ['babel-preset-env']
//遍历你的自定义要排除的依赖,安装到node_modules里的依赖一般不需要排除掉
de凡科抠图.forEach(function (dep) {
 var depPath = path.resolve(node_modules, dep);
 config.resolve.alias[dep.split(path.sep)[0]] = depPath;
 config.module.noParse.push(depPath);
module.exports = config;

以上代码可以直接用,请先将注释去掉。有了以上文件配置,你可以直接在package.json中添加scripts来打包你的app.js。

"scripts": {
 "build-config": "webpack",

执行npm run build-config可执行打包操作,但是目前为止还是会报错,因为缺少babel设置,webpack打包时无法识别jsx语法,什么时jsx语法?就是在js代码中写的类似于dom结构的东西,如下:

 h1 this.handleClick.bind(this)} "red" }} 
 {'Hello ' + this.state.text}
 /h1 
...

要解析这个东西还需要添加.babelrc文件,在其中添加:

 "plugins": ["transform-react-jsx"]

这句主要是说在babel参与打包时,会启用jsx转换成js的插件。到这里你已经可以成功打出你想要的bundle.js

 webpack
Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: :14
 Asset Size Chunks Chunk Names
bundle.js 715 KiB main [emitted] main
Entrypoint main = bundle.js
[./react/app.js] 2.74 KiB {main} [built]
 + 21 hidden modules

webpack打包的好处就是这里,可以让你的app加载速度更快,如上的包总计715kb,隐藏了没有用到的模块21个。这就是为什么要搭手脚架开发的理由。

jsx-transform的坑

此外还有一点要说一下,就是在引入React时,请整个引入,要么就额外引入它在编译后的代码中可能会用到的api,否则会说什么什么没找到而导致页面加载不出来。看编译后的代码:

var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
_createClass(MyTitle, [{
key: "handleClick",
value: function handleClick() {
 this.setState({
 text: "Clicked"
key: "render",
value: function render() {
 return _react2.default.createElement(
 "h1",
 { onClick: this.handleClick.bind(this), style: { color: "red" } },
 'Hello ' + this.state.text

如果你不引入react, 编译后render()函数中的_react2会是React.createElement而React显然是找不到这个变量的。看到编译后的代码,你可能更能理解,哦在jsx的dom中那样写原来是这个意思啊···

Vscode中开发,需要配置好eslint

react中有大量的es6的写法,如果不配置eslint你会看到大量飘红,首先是在项目的开发环境安装依赖:

"devDependencies": {
 "eslint": "^5.3.0",
 "eslint-plugin-import": "^2.14.0"

在项目根路径下添加.eslintrc.json,并添加以下代码[^eslint]:

 "parserOptions": {
 //使用的ecma版本
 "ecmaVersion": 6,
 "sourceType": "module",
 //使用jsx特性
 "ecmaFeatures": {
 "jsx": true
 "rules": {
 //忽略console的警告
 "no-console": "off",
 "semi": ["error", "always"]

参考:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

聊城市网站建设难-酒店型的网站该如何做?酒店

新建设酒店餐厅网站时大家要充足考虑到“酒店餐厅”的运营服务特点 因而大家在制作计划方案时候重视系统软件的好用性 靠谱性 优秀性和经济发展性标准 此外还会继续留意系统软件...

2021-01-15
网站建站公司-规范而标准的流程是保证企业网站

创建一个网站并不是一件简易的事儿。尽管一些企业如今投放广告说她们只花好几百元就可以建一个网站,可是在它的身后有许多掩藏的难题。数100元的网站并不是自身设计方案的,但...

2021-01-15
企业商城建站套餐-一个阿里云域名站应当如何建

制作一个网站是非常容易的,而想要运营好一个网站就非常难。建站行业发展迅速,近几年出现了很多建站公司,而成功发展下来的又有多少呢?在一开始都是模仿,然后不断创新,慢...

2021-01-14
网页模板图片-万象云模板自助建站系统系统201

微信小程序1.增加查寻作用应用情景:公司会出现一些和本身业务流程有关的数据信息,必须给到顾客出示“查寻信息内容”或“查寻交费”服务。1)查寻信息内容:院校、学习培训组...

2021-01-14
广州凡科互联网科技股份有限公司招聘电商网络

招聘人数:23职位信息如果你拥有强大的企图心和追求理想的韧性来吧,这里,给你的不仅是一份养家糊口的工作,而是一份事业!这里,你不仅仅是一个普通的销售,而是一个想要成功...

2021-01-13
广州凡科互联网科技股份有限公司招聘财务出纳

招聘人数:7职位信息岗位职责:1、日常现金、银行、票据的收、支结算;2、登记现金、银行日记账,对各类票据做好备查登记;3、每日核对现金、银行余额,编制资金日报表;4、对各...

2021-01-13
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信