Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React，发现React在ES6下的语法才是本体，结合ES6新的语言特性，使组件化开发显得更加直观。而且现在的Angular2也开始使用支持强类型的TypeScript，转译(transpiling)成了家常便饭。不学就分分钟跟不上时代的脚步了……
在搭建Webpack+React+ES6环境的过程中，我参考过很多2016年的老帖，发现最后运行时都有各种各样的报错。版本更新迭代太快了，搭建时的配置也不可避免地有了细微的变化。在各种老帖的基础上，我总结出2017年可用的搭建步骤如下：
1.下载安装最新版node.js（https://nodejs.org/en/）
（注意：为了能支持es6，请下载4.0以上版本）
2（可选）.有了node和在node中集成的npm，为了加快框架的下载速度，建议输入以下命令切换至淘宝源：
npm config set registry http://registry.npm.taobao.org/
3.全局安装Webpack, Babel, Webpack-dev-server：
npm install babel webpack webpack-dev-server -g
4.建立项目目录，用npm init 初始化 npm 项目
mkdir react-hello-world
cd react-hello-world
npm init
注：执行npm init命令时会让你输入各种项目信息，一般直接回车就好，会自动填写默认值。但是，要注意name不能跟我们的模块和项目文件目录同名。
初始化时也可以使用以下命令：
npm init -yes
这样便不会再有询问的环节，自动生成默认的package.json文件。但是也要手动修改name，不能跟我们的模块和项目文件目录同名。
5.在项目中安装 react, react-dom
npm install react react-dom --save
6.在项目中安装 Babel 转换器，需要用到插件 babel-preset-react, babel-preset-latest，latest 即最新的 ES 规范，包括了 Async/Await 这些新特性。
npm install babel-loader babel-core babel-preset-react babel-preset-latest --save
7.创建项目文件，main.js 即项目入口文件，App.js 即 React 组件主文件
touch index.html App.js main.js webpack.config.js
目录结构如下所示：
8.配置webpack，编辑webpack.config.js
module.exports = {
entry: './main.js', // 入口文件路径
output: {
path: '/',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js$/, // babel 转换为兼容性的 js
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'latest']
}
}
]
}
}
9.开始写项目：
(1).index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
(2).App.js:
import React from 'react';
class App extends React.Component {
render() {
return <div>Hello World!</div>
}
}
export default App
(3).main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; ReactDOM.render(<App />, document.getElementById('app'));
10.配置 npm scripts, 编辑 package.json，在"scripts"属性处添加一行：
"scripts": {
"start": "webpack-dev-server"
},
11.基本的框架搭建完毕，npm start 然后打开 http://localhost:3333 试试：
npm start
Webpack+React+ES6 最新环境搭建和配置（2017年）的更多相关文章
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解，完整实际配置过程记录(原创)
原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...
- android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解，完整实际配置过程记录(原创)
android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把 ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- React Native iOS环境搭建
前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
随机推荐
- ios开发之--使用AFNetWorking 3.1.0 ，简单的请求封装类
从苹果系统自带的请求类,到ASIHttpRequest第三方请求类,再到AFNetWorking第三方请求类,目前只要牵扯到数据请求,基本上都是用AFN,所以,这里纯粹是记录下: hRequestTo ...
- Java Tomcat 注册为Windows系统服务
注册方法: 1. 在DOS命令行模式下,cd到tomcat的bin目录下 cd tomcatpath 根目录加:后回车 进入到tomcat安装目录,cd bin,进入tomcat启动目录 2.在tom ...
- 下载Qt安装包
http://download.qt.io/archive/qt/ 找到下载页面,选择View All Downloads,找你需要的版本
- D3D HOOK实现透视讲解
实现目的: 目前大部分游戏通过Direct3D实现3D效果,通过挂钩相应函数,可以实现3D透视,屏幕挂字效果.而透视,屏蔽特定效果,设置透明在很多游戏(特别是FPS)中发挥着巨大的作用! 实现思路: ...
- hdu1244(dp)
简单dp Max Sum Plus Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (J ...
- mysql 修改默认配置 提高性能
解决问题 Lost connection to MySQL server at ‘reading authorization packet’, system error: 0 通过修改 connect ...
- 170407、java基于nio工作方式的socket通信
客户端代码: /** * */ package com.bobohe.nio; import java.io.BufferedReader; import java.io.IOException; i ...
- Hadoop中正确地添加和移除节点
正确地添加和移除节点 添加节点 克隆 克隆一台全新的Linux(如有IP冲突,可右击VMware右下角网络图标断开连接) 打开/etc/hostname修改主机名 打开/etc/sysconfig/n ...
- Ubuntu 16.04修改配置静态IP和DNS
Ubuntu 16.04修改配置静态IP和DNS 1.修改interfaces 文件 sudo gedit /etc/network/interfaces 2.添加 例如: auto enp0s25 ...
- 使用Ansible自动配置JDK环境
1.首先安装好Ansible环境,具体步骤请见Ansible安装 2.先创建hosts文件(为后面编写脚本安装JDK做铺垫) [root@localhost /]# vi hosts [jdktest ...