重温 Webpack, Babel 和 React

前端之家收集整理的这篇文章主要介绍了重温 Webpack, Babel 和 React前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

开始之前

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

最终实现的效果

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

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

初始化

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

  1. mkdir webpack-babel-react-revisited
  2. cd webpack-babel-react-revisited
  3.  
  4. yarn init

Webpack

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

  1. yarn add webpack --dev

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

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

然后,我们跑一下 Webpack

  1. ./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 配置文件来代替,为了文档结构看起来更加清晰,参考 目录 如下

  1. ├── config
  2. ├── paths.js
  3. ├── webpack.config.prod.js
  4. ├── src
  5. ├── app.js
  6. ├── package.json

下面是参考 配置

paths.js

  1. const path = require('path');
  2. const fs = require('fs');
  3.  
  4. const appDirectory = fs.realpathSync(process.cwd());
  5. const resolveApp = relativePath => path.resolve(appDirectory,relativePath);
  6.  
  7. module.exports = {
  8. appDist: resolveApp('dist'),appSrc: resolveApp('src'),};

这个文件不是必须的,但在项目增大后,它的意义就瞬间出来了

webpack.config.prod.js

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3.  
  4. const paths = require('./paths');
  5.  
  6. const plugins = [
  7. new HtmlWebpackPlugin({
  8. title: 'webpack babel react revisited',filename: path.join(paths.appDist,'index.html'),}),];
  9.  
  10. const config = {
  11. entry: {
  12. app: path.join(paths.appSrc,'app'),},output: {
  13. path: paths.appDist,filename: 'assets/js/[name].js',resolve: {
  14. extensions: ['.js','.jsx'],plugins,};
  15.  
  16. module.exports = config;

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

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

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

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

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

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

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

Webpack dev server

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

首先,安装 webpack-dev-server

  1. yarn add --dev webpack-dev-server

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

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const OpenBrowserPlugin = require('open-browser-webpack-plugin');
  4.  
  5. const paths = require('./paths');
  6.  
  7. const hostname = process.env.HOST || 'localhost';
  8. const port = process.env.PORT || 3000;
  9.  
  10. const plugins = [
  11. new HtmlWebpackPlugin({
  12. title: 'webpack babel react revisited',new OpenBrowserPlugin({ url: `http://${hostname}:${port}` }),devServer: {
  13. contentBase: paths.appDist,compress: true,port,};
  14.  
  15. module.exports = config;

webpack.config.prod.js 的基础上,我们增加open-browser-webpack-plugin 插件devServer 配置,open-browser-webpack-plugin 插件顾名思义,会帮我们自动打开 dev server 最后返回给我们的地址

更新 package.json

  1. "scripts": {
  2. "clean": "rimraf dist *.log .DS_Store","webpack:dev":
  3. "NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress","webpack:prod":
  4. "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"
  5. }

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

  1. yarn start

启动后,有没有瞬间感觉很棒

Babel

为了能够使用 ES6 以及更高版本,我们需要一个 转换编译器,我们选择 Babel,它能将 ES6 转换成可以在浏览器中运行的代码,除此之外,他还内置了 React JSX 扩展,可以说它的出现推动了 JavaScipt 的发展

所有,我们安装下面这些依赖包

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

创建 Babel 默认配置文件 .babelrc

  1. {
  2. "presets": ["env","react"]
  3. }

这个是告诉 Babel 用我们刚刚安装的两个 presets

接下来,更新 webpack 配置文件

  1. config.module = {
  2. rules: [
  3. {
  4. test: /\.(js|jsx)$/,exclude: /node_modules/,use: ['babel-loader'],],}

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

React

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

首先,我们还是先安装它

  1. yarn add react react-dom

用下面代码替换 console.log

  1. import React,{ Component } from 'react';
  2. import { render } from 'react-dom';
  3.  
  4. export default class Hello extends Component {
  5. render() {
  6. return <h1>Hello from 枫上雾棋!</h1>;
  7. }
  8. }
  9.  
  10. render(<Hello />,document.getElementById('app'));

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

  1. new HtmlWebpackPlugin({
  2. template: path.join(paths.appSrc,

参考 template 如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <Meta charset="UTF-8">
  5. <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  6. <title>webpack babel react revisited</title>
  7. </head>
  8. <body>
  9. <noscript>
  10. You need to enable JavaScript to run this app.
  11. </noscript>
  12. <div id="app"></div>
  13. </body>
  14. </html>

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

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

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

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

CSS

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

  1. body,html,#app {
  2. margin: 0;
  3. width: 100%;
  4. height: 100%;
  5. }
  6.  
  7. #app {
  8. padding: 30px;
  9. font-family: '微软雅黑';
  10. }

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

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

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

为此,我们首先安装

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

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

  1. import './style.css';

最后更新 webpack 配置文件

  1. config.module = {
  2. rules: [
  3. {
  4. test: /\.css$/,use: ExtractTextPlugin.extract({
  5. fallback: 'style-loader',use: 'css-loader',}
  6.  
  7. config.plugins.push([
  8. new ExtractTextPlugin("styles.css"),])

看起来稍显复杂,但是大功告成,为了更好地使用它,我们都得经历这个过程

重新启动服务,你会发现你的 dist 目录中多了一个 styles.css

图片

最后我们增加 file-loader 来处理我们引入的图片文件

首先,安装 file-loader

  1. yarn add --dev file-loader

我们在 src/images 中放入一张图片,在 app.js 中导入

  1. import avatar from './images/avatar.jpg';
  2.  
  3. export default class Hello extends Component {
  4. render() {
  5. return (
  6. <div>
  7. <img src={avatar} alt="avatar" style={{ width: 400,height: 250 }} />
  8. </div>
  9. );
  10. }
  11. }

更新 webpack 配置文件

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

重启服务,哈哈

总结

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

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

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

猜你在找的React相关文章