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
通常我们不像下面这样声明函数,因为会创建很多全局变量. function checkName() { // code } function checkEmail() { // code } 所以,我们 ...
- Tanks案例笔记(一、场景搭建)
一.场景搭建 1.首先我们导入案例的资源,然后新建一个空场景: 2.资源中为我们准备的场景的预制,我们直接把LevelArt预制拖到Hierarchy面板: 3.移除场景中默认的光源: 4.确保物体的 ...
- MySQL------如何卸载与安装
1.安装 转载:http://wenda.so.com/q/1471475177723102?src=140 2.卸载 转载:http://jingyan.baidu.com/article/3d69 ...
- CH5302 金字塔【区间DP】
5302 金字塔 0x50「动态规划」例题 描述 虽然探索金字塔是极其老套的剧情,但是有一队探险家还是到了某金字塔脚下.经过多年的研究,科学家对这座金字塔的内部结构已经有所了解.首先,金字塔由若干房间 ...
- react-native 学习（一）
本包子很久没更新过博客啊... 学习react-native 可以从官网上去学习.但是 目前我看到的中文网和英文网他们初始构建的项目的命令行是不同的. 在中文网上,构建项目的 react-native ...
- 该死的Kafka，远程连接Kafka超时以及解决办法
关于消息的发布与订阅,之前一直使用的是activeMQ基于JMS的消息队列进行操作的,最近听说有一个更高效的消息的发布与订阅技术,就是Kafka. 关于kafka的介绍,在这里就不做过多讲解了,因为我 ...
- 在HTML里面HEAD部分的META元素要表达的内容是什么
1.name属性主要有以下几种参数: A.Keywords(关键字) 说明:keywords用来告诉搜索引擎你网页的关键字是什么. 举例:<meta name ="keywords&q ...
- 剑指Offer——矩阵中的路径
题目描述: 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩阵 ...
- java基础06 switch
public class SwitchDemo01 { /** * 韩嫣参加计算机编程大赛 如果获得第一名,将参加麻省理工大学组织的1个月夏令营 如果获得第二名,将奖励惠普笔记本电脑一部 如果获得第三 ...
- ubuntu安装Jenkins指导
乌班图安装Jenkins指导 安装Java :apt install default-jre 参考:https://www.cnblogs.com/xionggeclub/p/7117004.html ...