您的位置：首页 > Web前端 > React

Reactjs+Webpack+es2015 入门HelloWord（一）

2016-08-09 00:00 597 查看

因公司产品用Reactjs，故预研一下，做学习记录。有说的不准确或者不恰当的地方，还请各位大神们使劲拍砖！
说明：

（一）中主要介绍直接引用js组件，实现Webpack打包，将会在（二）中，介绍编译jsx语句的过程。因自己在学习过程中遇到各种问题，故在此记录。在（三）中，计划介绍加载css文件。后续会不定时更新。

电脑：win7电脑。

环境搭建

1.node.js环境搭建及npm安装。 https://nodejs.org/en/ 进入官网，直接下载最新版本（当前为6.3.1），安装。
node新版本中，直接将npm一起装了。即安装一个6.3.1版本的node.js安装包，直接nodejs+npm一起安装了。

2.webpack安装

打开cmd，输入：

npm install webpack -g

即安装了全局的webpack，-g指设置为全局参数。

项目搭建

1.如下图，在本地创建该文件夹

2.打开cmd，转至创建的文件夹路径下：

输入：

npm init

一路回车即可，这些要求输入的内容，可以在该命令生成的.json文件中手动配置，最终本地会生成 package.json 文件。结束后，cmd不要关，后面继续用，后面不做特殊说明的情况下，默认都是该cmd指向路径下执行语句。

3.在项目中创建属于项目的webpack，前面创建的是电脑环境所需要的，这里创建的是本project所需要的wbepack，网速会影响文件下载安装速度的。

在cmd中输入：

npm install webpack --save-dev

4. 安装webpack需要的加载器

npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev

ps：这一步一定要有，不然webpack没法编译jsx文件。

5.安装react模块

npm install react react --save-dev

npm install react react-dom --save-dev

文件配置

在helloreact文件夹中创建 webpack.config.js 文件，并添加如下内容至该js文件：

var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel?presets[]=react,presets[]=es2015'
},{
test: /\.css$/,
loader: 'style!css'
}]
}
};

module.exports = config;

在package.json文件中将scripts代码修改为：

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},

最终package.json文件内容如下：

  "name": "helloreact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"webpack": "^1.13.1"
}
}

react es6 代码暨写：

1.如下图，在helloreact目录下，创建如下文件结构

其中，main.js中代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component.js';

main();

function main() {
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
}

component.js中代码如下：

'use strict';
import React from 'react';

var Hello;
Hello = React.createClass({
render: function () {
return (
<div className="productBox">
hello react&es2015&webpack!
</div>
);
}
});

module.exports = Hello;

index.html中代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="app"></div>

<script src="bundle.js"></script>
</body>
</html>

调试查看代码效果：

如下，输入 :

npm run build

可得到如下运行结果，即编译成功。

我们会在项目的build文件夹下，看到一个bundle.js文件，这就是编译后的文件，此时我们在浏览器中打开build文件夹下的index.html文件，即可看到

OK，这里就完成啦。这里感谢 http://my.oschina.net/u/1403181/blog/672501 博文，写的很详细，在此基础上学习的。

如需转载，请注明出处。

如有描述不对的地方，还望各位使劲拍砖~如参考本文未实现最终结论，可私信沟通，共同交流学习。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ReactJS Webpack es2015

相关文章推荐

新的分享

章节导航