开始之前

在书写文章之前,我假设大家已经有了 JavaScriptNode 包管理工具Linux 终端操作 这些基本技能,接下来,我将一步一步指引大家从头搭建一个 React 项目

最终实现的效果

我们将使用 WebpackBabel 搭建一个 React 应用,我们的目的很清晰,就是 更好的理解和掌握这些工具的使用

我们创建的应用程序既要做到 最小,也要遵循 最佳实践,为不是特别熟练的同学巩固一下基础

初始化

创建你的项目,并添加的你的配置文件 package.json


mkdir webpack-babel-react-revisited
cd webpack-babel-react-revisited yarn init

Webpack

我们首先安装 Webpack,它是目前非常流行的 模块打包器,它将应用程序包含的每个模块打包成少量的 ,以便这些代码从服务器加载到浏览器中


yarn add webpack --dev

接下来,我们开始书写一些模块。我们将源文件 app.js 保存到 src 目录中


/** app.js */ console.log('Hello from 枫上雾棋!');

然后,我们跑一下 Webpack


./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js

如果你打开生成的 app.bundle.js,你会发现上面是 webpack 的模块处理代码,下面是我们书写的 console.log

这条指令是将我们的 app.js 作为 Webpack入口文件,将结果输出到 dist 文件夹中,指令有些冗长,在实际开发中,我们使用 webpack 配置文件来代替,为了文档结构看起来更加清晰,参考 目录 如下


├── config
│ ├── paths.js
│ ├── webpack.config.prod.js
├── src
│ ├── app.js
├── package.json

下面是参考 配置

paths.js

const path = require('path');
const fs = require('fs'); const appDirectory = fs.realpathSync(process.cwd());

const resolveApp = relativePath => path.resolve(appDirectory, relativePath); module.exports = {

appDist: resolveApp('dist'),

appSrc: resolveApp('src'),

};

<p>这个文件不是必须的,但在项目增大后,它的意义就瞬间出来了</p>
<p><code>webpack.config.prod.js</code></p>
<pre><code class="javascipt">const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const paths = require('./paths'); const plugins = [
new HtmlWebpackPlugin({
title: 'webpack babel react revisited',
filename: path.join(paths.appDist, 'index.html'),
}),
]; const config = {
entry: {
app: path.join(paths.appSrc, 'app'),
},
output: {
path: paths.appDist,
filename: 'assets/js/[name].js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins,
}; module.exports = config;

这里我们还添加了一个 html-webpack-plugin,它简化了我们 HTML 文件的创建,安装我们就不再这里赘述了,如果还不知道的同学可以点击链接查看

其中,我们还使用了一个 语法糖,这样在我们导入 .js.jsx 时就不需要指定扩展名了

接下来,我们指定配置文件再跑一下 Webpack


./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js

发现除了实现上面的效果外,还自动帮我们生成了一个 index.html,我们可以点击这个 html,在控制台中查看效果,相比上面,是不是方便了很多

当然,最后我们肯定也不是使用这种方式来 build,打开 package.json,添加如下 脚本命令,然后执行 yarn build,是不是瞬间感觉 nice 了很多


"scripts": {
"clean": "rimraf dist *.log .DS_Store",
"build": "yarn run clean &amp;&amp; webpack --config config/webpack.config.prod.js --progress"
}

Webpack dev server

除此之外,Webpack 为我们提供了一个的 dev server,它还支持 模块热替换

首先,安装 webpack-dev-server


yarn add --dev webpack-dev-server

config 目录中添加配置文件 webpack.config.dev.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin'); const paths = require('./paths'); const hostname = process.env.HOST || 'localhost';

const port = process.env.PORT || 3000; const plugins = [

new HtmlWebpackPlugin({

title: 'webpack babel react revisited',

filename: path.join(paths.appDist, 'index.html'),

}),

new OpenBrowserPlugin({ url: http://${hostname}:${port} }),

]; const config = {

entry: {

app: path.join(paths.appSrc, 'app'),

},

output: {

path: paths.appDist,

filename: 'assets/js/[name].js',

},

resolve: {

extensions: ['.js', '.jsx'],

},

plugins,

devServer: {

contentBase: paths.appDist,

compress: true,

port,

},

}; module.exports = config;

<p>在 <code>webpack.config.prod.js</code> 的基础上,我们增加了 <a href="https://github.com/baldore/open-browser-webpack-plugin" rel="nofollow noreferrer">open-browser-webpack-plugin</a> 插件和 <code>devServer</code> 配置,<code>open-browser-webpack-plugin</code> 插件顾名思义,会帮我们自动打开 <code>dev server</code> 最后返回给我们的地址</p>
<p>更新 <code>package.json</code></p>

"scripts": {

"clean": "rimraf dist *.log .DS_Store",

"webpack:dev":

"NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress",

"webpack:prod":

"NODE_ENV=production webpack --config config/webpack.config.prod.js --progress",

"start": "yarn run clean && yarn run webpack:dev",

"build": "yarn run clean && yarn run webpack:prod"

}


<p>现在,我们就可以通过如下方式来启动</p>

yarn start


<p>启动后,有没有瞬间感觉很棒</p>
<h2>Babel</h2>
<p>为了能够使用 <code>ES6</code> 以及更高版本,我们需要一个 <code>转换编译器</code>,我们选择 <code>Babel</code>,它能将 <code>ES6</code> 转换成可以在浏览器中运行的代码,除此之外,他还内置了 <code>React JSX</code> 扩展,可以说它的出现推动了 <code>JavaScipt</code> 的发展</p>
<p>所有,我们安装下面这些依赖包</p>

yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react


<p>创建 <code>Babel</code> 默认配置文件 <code>.babelrc</code></p>

{

"presets": ["env", "react"]

}


<p>这个是告诉 <code>Babel</code> 用我们刚刚安装的两个 <code>presets</code></p>
<p>接下来,更新 <code>webpack</code> 配置文件</p>
<pre><code class="javascipt">config.module = {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
}

更新以后,虽然看不到什么变化,但事实上我们可以使用 ES6

React

最后,我们来添加 React,这也可能是你阅读这篇文章的原因

首先,我们还是先安装它


yarn add react react-dom

用下面代码替换 console.log

import React, { Component } from 'react';
import { render } from 'react-dom'; export default class Hello extends Component {

render() {

return <h1>Hello from 枫上雾棋!</h1>;

}

} render(<Hello />, document.getElementById('app'));

<p>因为要添加 <code>&lt;div id="app"&gt;&lt;/div&gt;</code>,所以我们要修改一下 <code>html-webpack-plugin</code> 的配置</p>

new HtmlWebpackPlugin({

template: path.join(paths.appSrc, 'index.html'),

}),


<p>参考 <code>template</code> 如下</p>
```&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
&lt;title&gt;webpack babel react revisited&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;noscript&gt;
You need to enable JavaScript to run this app.
&lt;/noscript&gt;
&lt;div id="app"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

接下来,就是见证奇迹的时刻

重新启动服务,你有没有发现搭建一个 React 应用程序就这么简单

接下来,大家就可以 自行探索,添加更多的东西来适应自身应用程序的需要

下面再补充一下如何添加 CSS图片

CSS

每个 web 应用程序都离不开 CSS,我们在 src 目录中创建 style.css


body,
html,
#app {
margin: 0;
width: 100%;
height: 100%;
} #app {
padding: 30px;
font-family: '微软雅黑';
}

将其添加到应用程序中我们需要使用 css-loader

如果想将 css 注入 style 标签中,我们还需要 style-loader,通常,是将这两个结合使用

我们使用 extract-text-webpack-plugin 将其解压到外部

为此,我们首先安装


yarn add --dev css-loader style-loader extract-text-webpack-plugin

然后在 app.js 中导入 style.css

import './style.css';
``` 最后更新 webpack 配置文件
config.module = {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
],
} config.plugins.push([

new ExtractTextPlugin("styles.css"),

])

<p>看起来稍显复杂,但是大功告成,为了更好地使用它,我们都得经历这个过程</p>
<p>重新启动服务,你会发现你的 <code>dist</code> 目录中多了一个 <code>styles.css</code></p>
<h2>图片</h2>
<p>最后我们增加 <a href="https://github.com/webpack-contrib/file-loader" rel="nofollow noreferrer">file-loader</a> 来处理我们引入的图片等文件</p>
<p>首先,安装 <code>file-loader</code></p>

yarn add --dev file-loader


<p>我们在 <code>src/images</code> 中放入一张图片,在 <code>app.js</code> 中导入</p>
<pre><code class="javascipt">import avatar from './images/avatar.jpg'; export default class Hello extends Component {
render() {
return (
&lt;div&gt;
&lt;img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} /&gt;
&lt;/div&gt;
);
}
}

更新 webpack 配置文件

config.module = {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/',
},
},
],
},
],
}
```

重启服务,哈哈

总结

如果有什么问题,可以查看 webpack-babel-react-revisited 仓库

现在,大家对搭建 React 应用程序是不是感觉轻松了很多,但 React 整个技术栈并不止包括这些,还有 ReduxReact Router单元测试代码校验 等内容,关于 React 其他内容,欢迎查看日志其他文章

原文链接:Setting up Webpack, Babel and React from scratch, revisited

来源:https://segmentfault.com/a/1190000011565381

重温 Webpack, Babel 和 React的更多相关文章

  1. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  2. 初入react-redux (基于webpack babel的react应用框架)

    react这么热门的框架也不介绍了,redux是一个单项数据流的小框架,当然不只配合react,它起初是为react而配的,现在面向所有了,比如ng-redux的项目.redux做为react的标准搭 ...

  3. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  4. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  5. webpack打包调试react并使用babel编译jsx配置方法

    http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...

  6. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  7. npm+webpack+babel+react安装

    npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...

  8. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  9. webpack+babel项目在IE下报Promise未定义错误引出的思考

    低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...

随机推荐

  1. 一些常见的synthesis attribute

    Noprune A Verilog HDL synthesis attribute that prevents the Quartus II software from removing a regi ...

  2. locate,find,df,mount,du命令

    1.locate找数据的时候,相当于去这个数据库里面查(locate查找的时候不扫描磁盘)查找图标文件:locate .icolocat -i 不区分大小写创建一个文件,该文件没有在数据库中,要想在数 ...

  3. Redis开发及管理实战

    目录 Redis数据类型 字符串 String string类型操作 字典 Hash 列表 List 集合 Set 有序集合 SortedSet 生产消费模型 Redis事务管理 事务命令 示例 Re ...

  4. 详解如何挑战4秒内百万级数据导入SQL Server(转)

      对于大数据量的导入,是DBA们经常会碰到的问题,在这里我们讨论的是SQL Server环境下百万级数据量的导入,希望对大家有所帮助.51CTO编辑向您推荐<SQL Server入门到精通&g ...

  5. Java学习记录--ModelMapper的使用

    在项目中很多时候需要把Model和DTO两个模型类来回转换,保证Model对外是隐私的,同时类似密码之类的属性也能很好地避免暴露在外了. 那么ModelMapper就是为了方便转换而实现的一个类库,下 ...

  6. 一、初识asyncio协程

    初识asyncio协程 一.基本概念 ​ 要想了解学习协程相关知识要先对以下几个概念先行了解: 阻塞 ​ 阻塞状态是指程序未得到某所需计算资源时的挂起状态,简单说就是程序在等待某个操作未执行完前无法执 ...

  7. numpy库数组属性查看:类型、尺寸、形状、维度

    import numpy as np   q = np.array([1,2,3,4],dtype=np.complex128)    print("数据类型",type(q))  ...

  8. JSP内置对象解析

    out对象:(PrintWriter类的实例) 用来向客户端输出信息,除了输出各种信息外还负责对缓冲区进行管理: 主要方法: print / println void 输出数据 newLine() v ...

  9. SpringCloud微服务实战二:Spring Cloud Ribbon 负载均衡 + Spring Cloud Feign 声明式调用

    1.Spring Cloud Ribbon的作用 Ribbon是Netflix开发的一个负载均衡组件,它在服务体系中起着重要作用,Pivotal将其整合成为Spring Cloud Ribbon,与其 ...

  10. 使用SpringBoot发送mail邮件

    1.前言 发送邮件应该是网站的必备拓展功能之一,注册验证,忘记密码或者是给用户发送营销信息.正常我们会用JavaMail相关api来写发送邮件的相关代码,但现在springboot提供了一套更简易使用 ...