从头创建一个基于 React, webpack, babel 的模板项目
2017-06-05 14:36
1201 查看
如果是一个刚接触 React 的新手,当学完了 React 的各种基本概念和语法之后,准备开始实际的开发工作时,他又会碰到各种新颖的名词:npm, webpack, babel, flux, es2015…… 如果以前接触过这些工具还好,否则为了建立一个简单的项目,还需要学习这一整套的流程,而在这中间又会碰上各种坑,这个过程将会非常痛苦。一个解决方案是去 GitHub 上寻找各种模板项目,用 React + webpack + … 作为关键字搜索可以发现许多别人创建的空项目,你可以在其基础上稍作修改然后开始开发。我在学习的过程中就是这么做的,但之后对其中的一些配置项仍是一知半解。
我在这里从头开始创建一个模板项目,并将过程记录下来,一方面希望能给看到这篇文章的人以帮助,另一方面也是加深我自己的理解。
最后完成的项目见这个项目:react-webpack-babel-boilerplate,在建立这个项目过程中的步骤可见另一个项目:create-react-boilerplate-steps,过程被分到了多个文件夹中。
在开始之前先看看项目的文件结构:
以上就是我们的项目需要的全部文件了。
接下来我会将这个项目的构建过程分解成几个步骤,你只要按照这些步骤依次进行即可。
首先我们新建一个名为 react-webpack-boilerplate 的文件夹,然后需要在命令行下对项目进行初始化。
你需要到 Node.js 的官网上下载 node.js 并安装,如果你已经对 NPM 有了基本的了解,可以在命令行下进入项目目录运行:
之后你需要按照提示输入你的项目的基本信息,这里也可以一直回车,则选择默认选项,或者运行:
项目的运行需要依赖各种 npm 包,需要在文件的 “dependencies” 或 “devDependencies” 项下写明 npm 包的名称及版本。现在这个项目还是空的,所以这里还没有这两项。
由于直接用 npm 安装的速度很慢,我们可以考虑用 cnpm install 命令来代替 npm install 命令。
CNPM 是淘宝建立的一个 NPM 镜像,由于服务器在国内,速度自然也就快多了。
完成后,你就可以用 cnpm install 来安装所需的 npm 包了。
淘宝
NPM 镜像
webpack 是一个打包工具,它能够将各种资源如 js、css、图片作为模块载入并进行打包。你可以从GitHub上这个教程
开始学习 webpack 的基本用法。
在命令行下面运行:
这一句的作用的是给项目安装 webpack,现在查看项目文件夹,会发现多出了一个
npm 包的地方。
上面的这条命令后面跟着的
webpack 的名称写入
“devDependencies” 项中,而
“dependencies” 项。
你可以选择将 webpack 安装在全局中,或者安装在这一个项目中。全局安装时需要在命令后面加上
webpack 命令了。
选择全局安装:
既然我们已经将 webpack 安装在了全局,那就先在命令行下测试一下它的打包功能。
新建
运行一个最简单的 webpack 命令:
它的意思是将
运行之后会发现多出了一个
node 运行该文件测试一下:
可以新建一个 html 文件,引入
打开
我们可以在命令行下完成各种复杂的 webpack 操作,不过更方便的方法是利用配置文件。
新建
html 文件的引用路径相应地改成:
再将 webpack 安装在本地:
现在你可以运行
我们在上面的过程虽然称之为打包,但是我们只不过将一个
js 文件是如何处理的。
新建
在 index.js 中加入下列语句:
再次用
以上的步骤可以在 step1 文件夹内查看。
首先运行如下命令,安装 web-dev-server:
添加如下的 server.js 文件:
这一句创建了一个 webpack dev server,这是一个 node.js express 服务器,关于它的用法可以见这里的文档。
在 webpack.config.js 的 output 这一项中加上:
server.js 修改:
好了,现在你可以运行:
然后打开浏览器进入 http://localhost:3000 查看效果了(当然,现在除了在控制台输出了信息之外什么都没干)
在
你可以用
上述步骤可以到 step2 文件夹中查看,运行下列命令:
webpack 的参考资料:
https://webpack.github.io/docs/tutorials/getting-started/
http://www.cnblogs.com/skylar/p/webpack-module-bundler.html
因为在 React 的项目中会用到 ES6(即ES2015) 的语法,而 ES6 还没有得到广泛的支持,所以我们需要借用 Babel 这个工具将我们使用了 ES6 语法的代码转换成 ES5 的语法,从而可以在更广泛的环境下运行。
Babel
的官方网站
在我们的项目中,需要安装这样的几个 package:
在 Babel 6.x 之前的版本中,Babel 会执行一些默认的转换规则,而在 6.x 之后的版本,你需要显示地告诉 babel 你想执行什么转换。最简单的方法就是使用 preset,比如说 ES2015 Preset。
Presets are sharable .babelrc configs or simply an array of babel plugins.
我们这里还需要另一个名为 stage-0 的 Preset:
参考文档:
Babel
的安装
Presets
现在只要添加一个 .babelrc 文件即可,babelrc 是
Babel 的配置文件,你可以在这个页面找到你可以加入文件中的各种选项。
这里只需在 .babelrc 中写入如下内容即可:
将 webpack.config.js 文件做如下的修改:
这样就可以在我们的项目使用 babel 来进行转码了。
这一步可在 step 3 中查看。
既然你在看这篇文章,相信你已经对 React 有了一定的了解,React 是做什么的就不用再多介绍了。
安装 React 的 package 十分简单:
为了能够让 babel 对 react 进行处理,再安装一个 babel-preset-react
同时在 .babelrc 文件中也加入这一项:
新建一个基本的 React 组件试试看:
首先在 index.html 中加上这样的一个元素:
React 元素将在上面渲染。
在 src 文件夹下新建两个文件 App.js index.js
现在你可以 npm start 看看效果了。
以上内容可以在 step4 文件夹中查看。
其实到上一步为止,我们已经完成了一个完整的 react 模板项目,不过还缺一点,就是当我们在编辑器中修改了文件的时候,需要在浏览器里手动刷新,才能看到结果。我们可以利用一个名为 react-hot-loader 的工具来帮助我们实现浏览器自动刷新的效果。
首先安装 react-hot-loader:
这里加上了版本号是因为默认安装最新的 react-hot-loader v3.0.0-beta 版本,设置会和下面的有所区别。
在 server.js 中加一行:
对 webpack.config.js 做如下修改:
并加入一个插件:
这一步的内容可以查看 step5 文件夹。
到此我们的这个模板项目就完成了。你可以在GitHub上的这个项目中看到完整的项目代码。
我在这里从头开始创建一个模板项目,并将过程记录下来,一方面希望能给看到这篇文章的人以帮助,另一方面也是加深我自己的理解。
最后完成的项目见这个项目:react-webpack-babel-boilerplate,在建立这个项目过程中的步骤可见另一个项目:create-react-boilerplate-steps,过程被分到了多个文件夹中。
项目结构
在开始之前先看看项目的文件结构:- src - index.js - App.js - .babelrc - index.html - package.json - server.js - webpack.config.js
以上就是我们的项目需要的全部文件了。
接下来我会将这个项目的构建过程分解成几个步骤,你只要按照这些步骤依次进行即可。
初始化项目
首先我们新建一个名为 react-webpack-boilerplate 的文件夹,然后需要在命令行下对项目进行初始化。你需要到 Node.js 的官网上下载 node.js 并安装,如果你已经对 NPM 有了基本的了解,可以在命令行下进入项目目录运行:
npm init
之后你需要按照提示输入你的项目的基本信息,这里也可以一直回车,则选择默认选项,或者运行:
npm init -y // 所有信息都按照默认设置
npm init命令的作用就是初始化一个项目,你可以发现项目文件夹内多出了一个
package.json文件,它的内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 按照默认设置生成的 package.json 文件 { "name": "react-webpack-boilerplate", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } |
由于直接用 npm 安装的速度很慢,我们可以考虑用 cnpm install 命令来代替 npm install 命令。
CNPM 是淘宝建立的一个 NPM 镜像,由于服务器在国内,速度自然也就快多了。
// 安装 cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后,你就可以用 cnpm install 来安装所需的 npm 包了。
淘宝
NPM 镜像
安装及配置
webpack
webpack
是什么?
webpack 是一个打包工具,它能够将各种资源如 js、css、图片作为模块载入并进行打包。你可以从GitHub上这个教程开始学习 webpack 的基本用法。
webpack
的安装
在命令行下面运行:$ npm install webpack --save-dev
这一句的作用的是给项目安装 webpack,现在查看项目文件夹,会发现多出了一个
node_modules文件夹,这里就是存放项目所依赖的
npm 包的地方。
上面的这条命令后面跟着的
--save-dev,表示将会把
webpack 的名称写入
package.json文件中。我们打开
package.json文件,发现文件中多了一项:
"devDependencies": { "webpack": "^1.13.2" }
--save-dev表示会写入
“devDependencies” 项中,而
--save写入的是
“dependencies” 项。
webpack
的测试
你可以选择将 webpack 安装在全局中,或者安装在这一个项目中。全局安装时需要在命令后面加上 -global或
-g参数,这样你可以直接在命令行中使用
webpack 命令了。
选择全局安装:
$ cnpm install webpack -g
既然我们已经将 webpack 安装在了全局,那就先在命令行下测试一下它的打包功能。
新建
index.js文件,里面只有一行:
1 | console.log('This is a javascript file for test.'); |
$ webpack index.js bundle.js
它的意思是将
index.js文件打包成名为
bundle.js的文件,后一个参数是你想要生成的文件名称。
运行之后会发现多出了一个
bundle.js文件,用
node 运行该文件测试一下:
$ node bundle.js This is a javascript file for test. // 输出了正确的结果
可以新建一个 html 文件,引入
bundle.js:
12 | // index.html <!DOCTYPE html> <html> <head> <title> fdfc react webpack boilerplate</title> </head> <body> <script src="./bundle.js"></script> </body> </html> |
index.html,你可以在浏览器的控制台中看到输出结果。
webpack
的配置文件
我们可以在命令行下完成各种复杂的 webpack 操作,不过更方便的方法是利用配置文件。新建
webpack.config.js文件:
1 2 3 4 5 6 7 8 9 10 11 12 1314 | // 一个简单的 webpack.config.js 文件 var path = require('path'); var webpack = require('webpack'); module.exports = { // webpack 进行打包的入口文件,这里 webpack 从根目录下的 index.js 开始进行打包 entry: [ './index' ], // webpack 打包后的输出文件的路径 output: { path: path.join(__dirname, 'dist'), // 文件放至当前路径下的 dist 文件夹 filename: 'bundle.js', // 将打包后的输出文件命名为 bundle.js } } |
1 | <script src="./dist/bundle.js"></script> |
$ npm install webpack --save-dev
现在你可以运行
webpack看看效果了。
我们在上面的过程虽然称之为打包,但是我们只不过将一个
index.js文件变成了
bundle.js文件,文件的体积甚至还变大了。那看一下如果我们有两个
js 文件是如何处理的。
新建
a.js:
12 | var a = 1; module.exports = a; |
12 | var a = require('./a.js'); console.log('a = ', a); |
webpack命令打包,生成了新的
bundle.js文件。好了,现在我们不需要用
script标签分别来引入
index.js和
a.js两个文件了,直接引入
bundle.js这一个就行了。如果我们有许多引用的资源,经过这样的打包过程,自然就方便多了。
以上的步骤可以在 step1 文件夹内查看。
安装
web-dev-server,并用其开启一个服务器
首先运行如下命令,安装 web-dev-server:$ npm i webpack-dev-server --save-dev
添加如下的 server.js 文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // server.js var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config.js'); var server = new WebpackDevServer(webpack(config)); server.listen(3000, 'localhost', function(err, result) { if (err) { return console.log(err); } return console.log('listening at locahost:3000...'); }) |
1 | var server = new WebpackDevServer(webpack(config)); |
在 webpack.config.js 的 output 这一项中加上:
1 | publicPath: '/static/' |
12 | var server = new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath }); |
$ node server.js
然后打开浏览器进入 http://localhost:3000 查看效果了(当然,现在除了在控制台输出了信息之外什么都没干)
在
package.json文件内加上这么一项:
12 | "scripts": { "start": "node server.js" }, |
npm start来代替上面的
node server.js了,这两者是等价的。
上述步骤可以到 step2 文件夹中查看,运行下列命令:
$ npm i $ npm start
webpack 的参考资料:
https://webpack.github.io/docs/tutorials/getting-started/
http://www.cnblogs.com/skylar/p/webpack-module-bundler.html
关于
Babel
Babel
是什么?
因为在 React 的项目中会用到 ES6(即ES2015) 的语法,而 ES6 还没有得到广泛的支持,所以我们需要借用 Babel 这个工具将我们使用了 ES6 语法的代码转换成 ES5 的语法,从而可以在更广泛的环境下运行。Babel
的官方网站
怎么安装
Babel?
在我们的项目中,需要安装这样的几个 package:$ npm install --save-dev babel-loader babel-core
在 Babel 6.x 之前的版本中,Babel 会执行一些默认的转换规则,而在 6.x 之后的版本,你需要显示地告诉 babel 你想执行什么转换。最简单的方法就是使用 preset,比如说 ES2015 Preset。
$ npm install babel-preset-es2015 --save-dev
Presets are sharable .babelrc configs or simply an array of babel plugins.
我们这里还需要另一个名为 stage-0 的 Preset:
$ npm install babel-preset-es2015 --save-dev
参考文档:
Babel
的安装
Presets
现在只要添加一个 .babelrc 文件即可,babelrc 是
Babel 的配置文件,你可以在这个页面找到你可以加入文件中的各种选项。
这里只需在 .babelrc 中写入如下内容即可:
{ "presets": ["es2015", "stage-0"] }
将 webpack.config.js 文件做如下的修改:
12 | module: { loaders: [{ test: /\.js$/, loaders: ['babel'], include: path.join(__dirname, 'src') }] }, devServer: { stats: 'errors-only' } |
这一步可在 step 3 中查看。
安装
React
既然你在看这篇文章,相信你已经对 React 有了一定的了解,React 是做什么的就不用再多介绍了。安装 React 的 package 十分简单:
$ npm install react react-dom --save
为了能够让 babel 对 react 进行处理,再安装一个 babel-preset-react
$ npm install babel-preset-react
同时在 .babelrc 文件中也加入这一项:
"presets": ["es2015", "stage-0", "react"]
新建一个基本的 React 组件试试看:
首先在 index.html 中加上这样的一个元素:
1 | <div id="app"></div> |
在 src 文件夹下新建两个文件 App.js index.js
12 | ./src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') ); |
12 | ./src/App.js import React, { Component } from 'react'; export default class App extends Component { render() { console.log('%c%s', 'font-size:20px;color:red', 'Something happened.'); return ( <div>This is a react boilerplate project with webpack and es6.</div> ); }; } |
以上内容可以在 step4 文件夹中查看。
安装
react-hot-loader
其实到上一步为止,我们已经完成了一个完整的 react 模板项目,不过还缺一点,就是当我们在编辑器中修改了文件的时候,需要在浏览器里手动刷新,才能看到结果。我们可以利用一个名为 react-hot-loader 的工具来帮助我们实现浏览器自动刷新的效果。首先安装 react-hot-loader:
npm install react-hot-loader@^1.3.0 --save-dev
这里加上了版本号是因为默认安装最新的 react-hot-loader v3.0.0-beta 版本,设置会和下面的有所区别。
在 server.js 中加一行:
12 | var server = new WebpackDevServer(webpack(config), { stats: config.devServer.stats, hot: true, publicPath: config.output.publicPath }); |
12 | entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/index' ], loaders: [{ test: /\.js$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') }] |
12 | plugins: [ new webpack.HotModuleReplacementPlugin() ] |
到此我们的这个模板项目就完成了。你可以在GitHub上的这个项目中看到完整的项目代码。
相关文章推荐
- 从头创建一个基于 React, webpack, babel 的模板项目
- 从头创建一个基于react,webpack,babel的项目
- 学习建立基于react,webpack模板项目
- 快速创建一个基于Gradle构建的SpringBoot Web项目(SpringBoot-01)
- 使用webpack搭建一个react项目
- 在基于 create-react-app 的React项目中进行代码分片、按需加载(code splitting)/ 免webpack配置
- 一步一步使用webpack创建react项目
- React-Router+antd+webpack+babel的一个详细demo
- vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用
- 基于 React + Webpack 的音乐相册项目(下)
- 基于webpack4搭建的react项目框架的方法
- [React项目总结] 基于 webpack 搭建前端工程基础篇
- 【Maven】创建一个结构清晰基于Maven的JavaWeb项目
- 开始一个React项目(一)一个最简单的webpack配置
- 基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用
- webpack构建React应用一:创建项目
- vue+webpack创建项目模板
- 基于webpack+react+antd 项目构建
- 基于webpack的React项目搭建(一)
- 开始一个React项目(二) 彻底弄懂webpack-dev-server的热更新