初识react之react+webpack+es6环境配置步骤整理
来源:互联网 发布:天猫魔盒必装软件 编辑:程序博客网 时间:2024/06/05 05:57
今天下午在朋友的帮助下,我顺利完成了react的环境安装配置,怀着激动的心情,写下这篇文章,希望能帮助更多刚进入react学习的朋友们。接下来,就进入配置吧:
1. 从官网下载最新版本的Node.js安装
下载地址:nodeJs官网下载
2. 安装完nodejs之后,打开cmd终端输入一下命令安装webpack
npm install webpack -g
3. 创建一个根目录,目录名为react-webpack-master,可以通过以下命令创建,也可以手动新建文件夹
mkdir react-webpack-master创建目录cd react-webpack-master/ 切换到该目录
4.使用 npm init 初始化,生成 package.json 文件
npm init 自定义创建package.jsonnpm init -yes 可以创建默认的package.json
5.现在我们的项目已经创建好了,接下来我们来添加依赖包及插件
(1)在项目目录下局部安装webpack npm install webpack --save-dev(2)安装React,--save 命令用于将包添加至package.json 文件 npm install react react-dom --save-dev(3)安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法,和es2015语法就会报错。 npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
6. 配置webpack.config.js文件
var path = require('path');var webpack = require('webpack');var HtmlWebPackPlugin = require('html-webpack-plugin');module.exports = { entry: path.resolve(__dirname, './app/javascript/main.js'), output: { path: path.resolve(__dirname, './build'), filename: '[name].js' }, devServer: { historyApiFallback: true, inline: true, port: 8181, }, module: { loaders: [ { test: /\.js?$/, exclude: /(node_nodules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }, ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebPackPlugin({ filename: 'index.html', template: 'app/index.html', inject: false, hash: true, }), ]};
注意:上面代码使用了webpack插件’html-webpack-plugin’用于对html文件打包,如果需要对html文件打包,还需安装此插件,命令是
npm install --save-dev html-webpack-plugin
- entry: 指定打包的入口文件 main.js。
- output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称。
- devServer:设置服务器端口号为 8181,端口后你可以自己设定 。
- module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。
- webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上,更重要的是我们可以在
- package.json文件内定义scripts,同时修改webpack的配置文件来达到自动刷新的效果。
7. 安装webpack-dev-server执行以下命令
npm install webpack-dev-server --save-dev
8. 在package.json文件中为scripts添加,方便使用命令
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build", },
- 这里的命令是webpack,如果需要压缩编译的话,将webpack改成webpack -p
9. 最终package.json文件如下
{ "name": "react-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build", }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "extract-text-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^2.29.0", "react": "^15.6.1", "react-dom": "^15.6.1", "webpack": "^3.3.0", "webpack-dev-server": "^2.5.1" }}
- 这里有一点提醒大家,package.json中name不能跟我们的模块和项目文件目录同名
10. 项目代码编写
(1)项目目录结构如下:
(2)index.html代码
<!DOCTYPE <!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title>react环境</title></head><body> <script type="text/javascript" src="http://localhost:8181/webpack-dev-server.js"></script> <div id="content"></div> <script type="text/javascript" src="main.js"></script></body></html>
(3)main.js代码
let React = require('react');let ReactDOM = require('react-dom');var AppComponent = require('./components/Tab1');ReactDOM.render( <AppComponent /> , document.getElementById('content'));
(4)Tab1.js代码
var React = require('react');var Tab1 = React.createClass({ render: function(){ return ( <div> React + Webpack + ES6从环境搭建到HelloWorld </div> ); }})module.exports = Tab1;
11. 在根目录下执行以下命令
npm run dev
12. 在浏览器中直接访问
http://localhost:8181/
结果如下图:
13. 注意:
(1)环境安装好后,关闭命令终端想要再次启动项目,需要重新再项目根目录下运行npm run dev命令, 在提示webpack:Compiled successfully之后,说明启动成功,访问时,根据npm run dev命令执行过程中提示的Project is running at …后面的地址在浏览器中进行访问。
(2)在重启项目的时候,需要关闭上一次开启的npm run dev命令提示框,否则当再次运行npm run dev命令时会报如下错误:
最后,附上我的项目百度云下载地址:点击下载
- 初识react之react+webpack+es6环境配置步骤整理
- webpack+react+es6环境配置
- react + webpack + ES6 环境搭建
- webpack+react+ES6 配置安装
- 初识react环境配置
- webpack+ES6+react搭建简单开发环境
- 关于ES6+React+webpack的环境搭建
- 使用webpack搭建react ES6开发环境
- webpack+babel+es6+react环境搭建
- 搭建es6+react开发环境---webpack
- React+Webpack+ES6组合开发环境部署
- React+webpack 的开发环境配置步骤(一)
- React+webpack 的开发环境配置步骤(二)
- React+webpack 的开发环境配置步骤(三)
- React+webpack 的开发环境配置步骤(四)
- React+webpack 的开发环境配置步骤(五)
- react+webpack+es6详细配置教程
- React系列1-飞速搭建React+ES6+Webpack开发环境
- 指针函数与函数指针的区别
- 最小树形图-朱刘算法
- Java 泛型总结(三):通配符的使用
- Centos7下Hadoop的配置(单机,伪分布式和集群)(1)
- live555Server读取文件修改为socket接收数据遇到的问题
- 初识react之react+webpack+es6环境配置步骤整理
- 自定义模板
- 转接IC MS2100:CVBS/S-VIDEO转USB
- [usaco gold 2016.1]生气的奶牛
- rapidjson的read和write的sample
- git教程--远程仓库
- poj 3281 拆点最大流
- 机器学习-线性回归-最小二乘法
- MYSQL学习笔记(五)用通配符进行过滤