使用webpack和babel搭建react开发环境
所以让我们开始吧,这篇文章非常适合那些害怕沾手react开发环境所需的繁琐的配置而常常采取东凑西拼方式的新手.我的第一个目标就是保持这篇文章简洁易懂.我不会使用任何模板文件,并且你能在github repo上找到完整的设置.我们会使用以下技术:
在这边文章结束之前,我们将设置好一个React的开发环境以及一个简单的打印hello world的页面. 去拥抱乐趣吧!! 前置准备在开始项目之前我们需要先安装Yarn和Node到我们的机器上. 就如上面提到的,我们将使用Yarn做为包管理器.它其实和npm相当相似,而且也提供和npm几乎一样的命令行工具.在此之上还有一些npm所不具备的额外的特性.或许你会感到不解,我列举了几个使用Yarn的主要原因 :
如果要了解更多的话,可以去看看Yarn的文档. Mac Os的用户可以放心使用下面的命令安装Yarn,以为我已经为你们先行尝试过了,使用其他操作系统的可以去查看Yarn的安装说明,以便正确地安装Yarn. > brew update > brew install yarn 开始入门打开你的终端创建一个新文件夹.你可以随意命名这个文件夹.进入文件夹后通过 > mkdir hello-world-react > cd hello-world-react > yarn init 当 安装及配置Webpack下面我们需要安装webpack和一些依赖. > yarn add webpack webpack-dev-server path 可以发现在当前文件夹下创建了一个新文件 现在我们已经安装了webpack了,我们需要一个配置文件来告诉webpack应该要做什么.在项目文件夹中创建一个新文件 > touch webpack.config.js 然后更改配置文件: /*
./webpack.config.js
*/
const path = require('path');
module.exports = {
entry: './client/index.js',output: {
path: path.resolve('dist'),filename: 'index_bundle.js'
},module: {
loaders: [
{ test: /.js$/,loader: 'babel-loader',exclude: /node_modules/ },{ test: /.jsx$/,exclude: /node_modules/ }
]
}
}
基本上,使用webpack我们需要制定一个
无论如何,我们同时还需要
配置中的loaders接受一个loader的数组.我们需要指定 Babel设置我们在webpack配置中指明了使用 > yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev 我们安装了我们所需要的所有依赖.注意我们添加了 然后我们需要去设置babel,设置babel可以通过添加一个 > touch .babelrc 然后做以下改动 /*
./.babelrc
*/
{
"presets":[
"es2015","react"
]
}
就这样.当webpack调用 设置我们的react组件到目前为止,我们的目录结构是这样的 . |-- node_modules |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock 你不觉得是时候开始添加React的支持了吗?我们创建一个新文件夹 > mkdir client > cd client > touch index.js > touch index.html > cd .. 现在目录结构是这样的 .
|-- client
|-- index.html
|-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock
接下来让我们写点代码吧.我们用一些简单的语句来验证下我们的配置是否能正确运行吧. 编辑 /*
./client/index.js
which is the webpack entry file
*/
console.log('Hey guys and ladies!!')
编辑 <!--
./client/index.html
basic html skeleton
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
要把打包完成的代码添加到我们的html文件,其中一个方法是手动插入一个 Html-Webpack-Plugin首先我们需要安装这个插件.在项目的根目录下运行终端.然后执行以下命令 > yarn add html-webpack-plugin 然后编辑 /*
./webpack.config.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',filename: 'index.html',inject: 'body'
})
module.exports = {
...
module: {
loaders: [
...
]
},// add this line
plugins: [HtmlWebpackPluginConfig]
}
其实配置本身已经非常清晰了.我们导入了 运行!我们快要完成了.让我们尝试去运行我们的配置.在此之前先做点微小的工作.打开 /*
./package.json
*/
{
"name": "hello-world-react","version": "1.0.0","main": "index.js","license": "MIT",// add the scripts key to your package.json
"scripts": {
"start": "webpack-dev-server"
},"dependencies": {
...
},"devDependencies": {
...
}
}
然后我们能在终端上执行以下命令 > yarn start 然后打开浏览器并访问
成功运行了!让我们来添加一些简单React组件看看会发生什么. React,React,React(重说三)我会创建一个非常简单的 > yarn add react react-dom 接下来在 > cd client > mkdir components > cd components > touch App.jsx > cd ../.. 现在我们的目录结构是这样子的 .
|-- client
|-- components
|-- App.jsx
|-- index.html
|-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock
React的组件命名约定俗成地使用 接下来编辑 /*
./client/components/App.jsx
*/
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div style={{textAlign: 'center'}}>
<h1>Hello World</h1>
</div>);
}
}
最后为了把我们的组件渲染到我们的页面上.把 /*
./client/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App />,document.getElementById('root'));
打开终端再次运行我们的项目,确认终端当前目录为项目的根目录. > yarn start
这就对了!非常高兴你完成我们一开始的目标!! 总结现在我们已经搭好React的开发环境了.我希望这篇教程能让你明白这些配置是怎么一回事以及为什么我们需要这些配置.同时,如果每个项目都需要那么多配置的话,你可以fork我的repo并以此为基础来改动. 请大胆尝试不同的webpack配置,如果发现了非常cool的东西也欢迎在评论低下留言.( 最后,在这个教程之后你能够并且应该尝试去完成一个深度的React的项目.Wow~ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |