Reactjs+Webpack+es2015 入门HelloWord（一）

最新推荐文章于 2019-03-21 12:03:11 发布

chongwen7518

最新推荐文章于 2019-03-21 12:03:11 发布

阅读量136

点赞数

文章标签： webpack javascript json ViewUI

原文链接：https://my.oschina.net/tangyuanyu/blog/730265

版权

因公司产品用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>

调试查看代码效果：

如下，输入 :