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的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
随机推荐
- JQuery------制作div模态框
转载: http://blog.csdn.net/li_xiao_ming/article/details/6738922 如图: 代码: html(使用opacity的话content无法变为不透明 ...
- UIImage 裁剪图片和等比列缩放图片
本文转载至 http://blog.csdn.net/cuiweijie3/article/details/9514293 转自 http://www.tedz.me/ios/uiimage-crop ...
- hdu4122(单调队列)
处理题目中给的日期,然后用单调队列维护 Alice's mooncake shop Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32 ...
- js 中 this 的指向问题
高程上的大前提: 1.this 对象是在运行时基于函数的执行环境绑定的:在全局函数中,this 等于window,而当函数被作为某个对象的方法调用时,this 等于那个对象:不过,匿名函数的执行环境具 ...
- 160309、Spring AOP操作action时无法注入，报空指针错误
今天帮同事看个问题,action注入失败,代码没问题,主要是stuts2权限移交的问题,特此记录一下 Spring AOP操作action时无法注入,报NullPointer异常 当使用Spring ...
- 面试之四：JVM内存区域分配
1.程序计数器(线程私有)[不会OOM] 记录线程执行的代码位置,每个线程各自独有. 2.栈:虚拟机栈和本地方法栈(线程私有)[会OOM和StackOverflow] 虚拟机栈 每个JAVA方法在执行 ...
- c#系统中类的方法 Console、Object，ToolStripDropDownItem，string
一.Console 1.System 命名空间中的 Console 类提供了一个函数 ReadLine(),用于接收来自用户的输入,并把它存储到一个变量中. int num; num = Conver ...
- 第八课——MySQL优化之InnoDB基础原理
一.事务隔离级别 理解各种事务隔离级别的优缺点 (一)四种事务隔离级别总结 (二)四种事务隔离级别下,去重现脏读现象.不可重复读现象.幻读现象 1.在RU隔离级别下,会出现脏读现象 2.在RC隔离级别 ...
- Exchange Management Console Error
Exchange 2010 error solved : The WS-Management service cannot process the request. The system load q ...
- nodejs(一)
nodejs第一章节 使用node来实现第一个http服务器 var http = require(‘http’); http.createServer(function (request, resp ...