React ES6 + Webpack2搭建项目环境

太久没更新文章了,这几个月说实话有很多可以写的,不过一直没抽出时间来码字。

最近在折腾React,因为之前用的Angular,React的写法一开始还有点不适应……

配置Webpack

npm init //初始化项目
npm install webpack --save-dev //安装webpack

在项目根目录新建一个webpack的配置文件webpack.config.js,并添加如下代码:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry:'./app/index.jsx',   //入口文件
    output:{
        path:path.resolve(__dirname,'./build/'), //输出文件路径
        filename:'bundle.js' //输出文件名
    },
    module:{
        rules:[{
            test:/\.jsx?$/,
            loader:'babel-loader'
        }]
    },
    resolve:{
        extensions:['.js','.jsx']
    }
}

创建入口文件

用npm安装reactreact-dom

npm install react react-dom --save

安好后在入口文件对应的位置创建文件/app/index.jsx,并添加如下代码:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render(){
        return <h1>Hello React!</h1>
    }
}

ReactDOM.render(<App></App>,document.getElementById('app'));

babel-loader配置

为了能让更多浏览器兼容,我们需要用babel-loader将ES6的代码转换为ES5。

首先安装对应的依赖包。

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

babel-preset-es2015和babel-preset-react是专门用来转换ES6和JSX语法的。

需要在根目录创建名为.babelrc的文件,并添加代码:

{
  "presets": ["es2015","react"]
}

编译并在客户端运行

在根目录创建index.html,添加代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="build/bundle.js"></script>
</body>
</html>

接下来用webpack的命令编译代码:

webpack -d //编译为source map,方便调试

成功的话,根目录下会多出build文件夹及子文件bundle.js,打开index.html就会看见Hello React!

至此的文件目录结构如下:

根目录
  |
  ├ app ┐
  |    index.jsx  //入口文件
  |
  ├ build ┐
  |    bundle.js  //编译后文件
  |
  ├ node_modules ┐
  |             ...
  |
  ├ .babelrc  //babel-loader配置文件
  |
  ├ index.html
  |
  ├ package.json
  |
  └ webpack.config.js  //webpack配置文件

总结

文章内主要写了webpack2 + react es6的配置方法,更详细的说明可以参照官方文档。

 红包的随机分配算法
初探HLS流媒体-用七牛云快速实现M3U8 TS流点播 
上一篇:红包的随机分配算法
下一篇:初探HLS流媒体-用七牛云快速实现M3U8 TS流点播


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ