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的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
随机推荐
- JavaScript 事件循环 — event loop
引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式 ...
- [置顶]JB开发之制作系统级Application
1.编译工程,生成xx.app 2.制作引导进程xx替换xx.app里面的xx进程 引导进程代码: int main(int argc, char *argv[]) { @autoreleasepoo ...
- [2011WorldFinal]Chips Challenge[流量平衡]
Chips Challenge Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- iOS 引导页面启动一次
#import "AppDelegate.h" @implementation AppDelegate - (BOOL)application:(UIApplication *)a ...
- 关东升的iOS实战系列图书 《iOS实战：入门与提高卷（Swift版）》已经上市
承蒙广大读者的厚爱我的 <iOS实战:入门与提高卷(Swift版)>京东上市了,欢迎广大读者提出宝贵意见.http://item.jd.com/11766718.html ...
- 后端程序员如何玩转AJAX
1.原生的Ajax入门 (感觉很是繁琐,所以一般我们都是用简单的方式) 创建一个核心对象 XMLHttpRequest var xmlhttp; if (window.XMLHttpRequest) ...
- Java中Integer类的方法和request的setAttribute方法的使用与理解
一.Integer类的使用方法 Interger:整数类型 1.属性. static int MAX_VALUE:返回最大的整型数: static int MIN_VALUE:返回最小的整型数: st ...
- Hibernate中的一些关键字理解
ORM的理解: ORM(Object/Relation Mapping): 对象/关系映射ORM 主要解决对象-关系的映射: ORM的思想:将关系数据库中表中的记录映射成为对象,以对象的形式展现,程序 ...
- SaltStack数据系统-Grains
上一篇:SaltStack配置管理 granis:谷粒 pillar:柱子 grains是salt的一个组件,存放minion启动时候收集的信息(状态信息) 查看 salt '*' grains.it ...
- ZOJ 3932 Deque and Balls
There are n balls, where the i-th ball is labeled as pi. You are going to put n balls into a deque. ...