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的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
随机推荐
- WPF 渲染级别 (Tier)
在WPF中,显卡的功能相差很大.当WPF评估显卡时,它会考虑许多因素,包括显卡上的RAM数量.对像素着色器(piexl shader)的支持(计算每个像素效果的内置程序,如透明效果),以及对顶点着色器 ...
- solr初认识
Solr : Search On Lucene Replication Solr 基本概况 Apache Solr (读音: SOLer) 是一个开源的搜索服务器.Solr 使用 Java 语言开发, ...
- iOS开发经验总结（一）
本文转载至 :http://dreamahui.iteye.com/blog/1878650 软件开发方面 1. 在每个页面的入口和出口(一般是viewDidLoad和dealloc)打上日志,可以 ...
- php做图片上传功能
今天来做一个图片上传功能的插件,首先做一个html文件:text.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- 160309、Spring AOP操作action时无法注入，报空指针错误
今天帮同事看个问题,action注入失败,代码没问题,主要是stuts2权限移交的问题,特此记录一下 Spring AOP操作action时无法注入,报NullPointer异常 当使用Spring ...
- 任务调度quartz整理
一张图,了解quartz运行机制: 此图表示:Scheduler是容器,Trigger是多个触发器,jobDetail是多个任务,Calendar是多个日历. jobDetail任务,需要指定类实现J ...
- eclipse中设置在编译运行项目之前自动保存修改的文件
Window -> Preferences -> General -> Workspace -> “Save automatically before build” Windo ...
- win10系统下把Oracle卸载干净
我和大家一样,遇到了一个问题,就是如何把Oracle从自己的电脑卸载干净,很多人都觉得很难把Oracle卸载干净,于是选择重装系统,因为解决不了Oracle没有卸载干净之后,重装不了的问题,有时候真的 ...
- WebSocket之获取HttpSession
WebSocket之获取HttpSession 由于WebSocket与Http协议的不同,故在使用常用的HttpSession方面就存在了一些问题.通过google翻阅到了在onOpen方法下使用H ...
- Eclipse+ADT+Android SDK 搭建安卓开发环境（版权属于forever-z）
运行环境 windows 7或者10(64位); 为例eclipse-jee-neon-3-win32-x86_64: ADT-23.0.4 下载地址 安装JDK 这里可以参考关于安装JDK的教程,请 ...