工欲善其事必先利其器,在进行 React 的开发时,通常会结合 Webpack 和 ES6 一起进行。本文讲的正是如何使用 React + Webpack + ES6 进行组合开发。关于 React 的入门,后面另开一文。本文最终的输出是一个 Hello World 。本文所涉及 ...
工欲善其事必先利其器,在进行 React 的开发时,通常会结合 Webpack 和 ES6 一起进行。本文讲的正是如何使用 React + Webpack + ES6 进行组合开发。关于 React 的入门,后面另开一文。
本文最终的输出是一个 Hello World 。
本文所涉及的代码在 这里 ,可以直接作为一个种子项目使用:
git clone https://github.com/huangtengfei/react-webpack-es6.gitcd react-webpack-es6npm installnpm run dev
如果你使用 sublime 开发,可以安装 sublime-react 插件。
安装依赖项
在项目目录下 ,初始化一个 package.json
文件,执行:
npm init
安装 react
和 react-dom
依赖:
npm install react react-dom --save
安装 webpack
和 webpack-dev-server
依赖:
npm install webpack webpack-dev-server --save-dev
安装 babel
依赖:
npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev
代码编写
本文示例最终的目录结构是这样的:
--your project |--components(组件目录) |--Hello(组件1) |--imgs |--bg.png |--index.jsx |--index.less |--World(组件2) |--index.jsx |--index.less |--index.js(入口文件) |--build(输出目录) |--index.html |--bundle.js(输出文件,由 webpack 打包后生成的) |--package.json |--webpack.config.js
创建 React 组件
按照前面的目录结构,新建一个 components 文件夹,存放所有组件。
在 components 下建一个 Hello 文件夹,用来存放 Hello 组件的逻辑和样式。
Hello/index.js
的代码如下:
import React from 'react';import ReactDOM from 'react-dom';class Hello extends React.Component { render() { return <h1>Hello</h1> }}ReactDOM.render(<Hello />, document.getElementById('hello'));
World 组件的开发同上,略去。
创建页面
在 build 目录下创建一个 HTML 页面,来使用前面创建的两个组件。
index.html
的代码如下:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <div id="hello"></div> <div id="world"></div> </body></html>
使用 Webpack 打包
Webpack 是一个前端模块加载兼打包工具,可以对 JS、CSS 和 图片 等都作为模块来使用和处理。对不同类型的需要编译的文件,需要使用相应的加载器(比如用 babel 转译 ES6)。
另外,由于 Webpack 需要一个入口文件来进行分析和处理,需要先将 React 组件引入到一个主文件。
从前文的目录结构可以看出, components/index.js
就是这个主文件,它的代码如下:
import Hello from './Hello/index.jsx';import World from './World/index.jsx';
下面就是 Webpack 配置文件 webpack.config.js
的编写,代码如下:
var path = require('path');var webpack = require('webpack');var ROOT_PATH = path.resolve(__dirname);var APP_PATH = path.resolve(__dirname, './components/index.js');var BUILD_PATH = path.resolve(__dirname, './build');module.exports = { entry: APP_PATH, output: { path: BUILD_PATH, filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, loaders: ['babel-loader?presets[]=es2015,presets[]=react'] }] }}
最后,需要将编译打包后的文件 bundle.js
引入到 index.html
中:
<body> ... <script src='/images/loading.gif' data-original="./bundle.js"></script></body>
构建和启动
构建
前面的开发完成后,需要执行 webpack.config.js
中的构建任务,生成 bundle.js
,这个操作可以在 package.json
中配置:
"scripts": { "build": "webpack"}
执行 npm run build
完成构建,此时打开 index.html
,即可看到效果。
启动服务器
但这种方式显得略 low,一是它是双击以文件的形式打开 HTML 页面,二是每次有更改都要手动执行 npm run build
重新打包。
一种更好的方式是启动一个静态资源服务器,监听文件内容修改并自动打包。在这里用的是前面安装好的 webpack-dev-server
,在 package.json
中配置:
"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"}
简单解释一下 dev 中各个参数的含义: webpack-dev-server
在 localhost:8080
建立一个 Web 服务器; --devtool eval
映射编译好的源码,用于调试; --progress
显示代码打包进度; --colors
表示在命令行中显示颜色; --content-base
来指定 server 启动后的内容目录。
执行 npm run dev
启动 server,此时打开 http://localhost:8080
,即可看到效果。修改一下 Hello 或者 World 组件中的内容,刷新页面,你会发现浏览器中内容也相应改变了。
自动刷新
前面实现了对文件修改的监听和自动打包,但浏览器还需要手动刷新。其实可以在 Webpack 的配置文件中增加一个入口点,实现自动刷新。
··· entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', APP_PATH ],···
这样,应用在修改后,浏览器就会自动刷新了。
更完整的种子
其实讲到这里本文已经可以结束了,不过为了让种子更完整,并体现 Webpack 的强大,再加上点样式和图片吧。
处理样式
不管什么类型的资源,Webpack 都需要相应的 loader 来处理。对于普通的 css,需要 css-loader
和 style-loader
两种 loader,前者会遍历所有 css 并对 url()
处理,后者将样式插入到页面的 style 标签中。对于预编译 css 语言,还需要额外的 loader,比如 less-loader
或 sass-loader
,这里用 less 举例。
首先,安装 loader :
npm install less-loader css-loader style-loader --save-dev
然后,在 webpack.config.js
中配置 loader,注意 loader 的处理顺序是从右到左的:
...{ test: /\.less$/, loader: 'style!css!less'}...
配置完之后要重新运行一下 npm run dev
接着,在 Hello 和 World 组件中各添加一个样式文件,这里用 Hello/index.less
举例:
@lightgrey: #ccc;h1 { background: @lightgrey;}
最后,在 components/index.js
中引入 less 文件:
import './Hello/index.less';import './World/index.less';
切换到浏览器,看一下是不是有变化了呢~
处理图片
为了减轻网络请求的压力,有时候会有将小图片转成 BASE64 字符串的需求,这个可以通过 url-loader
来实现。
同处理样式中的操作,首先安装 url-loader
:
npm install url-loader --save-dev
然后配置 webpack.config.js
:
...{ test: /\.(png|jpg)$/, loader: 'url?limit=50000'}...
重新重新运行一下 npm run dev
接着,在 Hello 组件下建一个 imgs
文件夹,并放入一张小于 50K 的 bg.png
做背景图片,然后修改 Hello/index.less
文件:
h1 { background: url('./img/bg.png');}
切换到浏览器,审查元素,看一下图片是不是转成 BASE64 字符串了呢~
到此为止,这已经是一个较为完整的种子了。想对 React 、Webpack 和 ES6 各自做深入了解的,请自行查阅资料~
补充
loader 的写法
在使用 Webpack 打包小节 webpack.config.js
的编写中, babel-loader
最初我是这样写的:
loaders: [{ test: /\.jsx?$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] }}]
后来为了使用热加载,引入了 react-hot
,loader 要改为 loaders,即:
... loaders: ['babel-loader', 'babel-loader'], query: { presets: ['es2015', 'react'] }...
这时在执行构建的时候,会报错 Error: Cannot define ‘query’ and multiple loaders in loaders list ,于是改成这种写法。不过后来直接用 webpack-dev-server 的 --hot
选项,也没引入 react-hot
了,但此处写法仍保留,便于后面扩展 loader 。
安装 less-loader 报错
如果在安装样式的几个 loader 的时候,报以下错误:
UNMET PEER DEPENDENCY less@^2.3.1
不妨试试用 cnpm 单独安装 less :
tnpm i less@^2.3.1阅读原文请点击此处
原标题:使用 Webpack 和 ES6 进行 React 开发
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。