阅读本文你需要了解(pre-knowledge)

  1. nodejs环境安装
  2. webpack基础知识
  3. react基础知识

使用babel 7.x - 2018年11月28日 更新

如果你使用的仍然是babel 6.x, 请忽略此节的内容
在babel7.x中, 用到的presets和loader都改名了, 如下:

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react ...(etc.)

{
    "presets": [
        "@babel/env",
        "@babel/preset-react"
    ]
}

其中@babel/preset-env替换原来的babel-preset-es2015, @babel/preset-react替换原来的babel-preset-react. 当然你也可以使用6.x版本的babel, 不过需要注意6.x版本的babel要求使用7.x版本的babel-loader, 需要在安装的时候指定一下loader的版本.

简述

最近使用react开发项目, 用到了一个叫做create-react-app的cli工具, 一键生成react项目, 帮我们新手解决了不少问题.

  • 安装react的依赖包
  • 基于js模块化的打包
  • 单元测试的配置
  • 开发模式下的自动刷新功能
  • 开发环境下的代理服务
  • 生产环境下的优化

虽然工具带给了我们很大的便利, 但是我们还是要看一看究竟如何手动搭建一个react项目.

创建项目

  • 我们首先创建一个项目react-demo 
      mkdir react-demo
  cd react-demo
  npm init -y
  • 并且在react-demo目录中添加一些文件, 完成后目录结构如下: 
      .
  ├── dist
  │   └── index.html # 项目的html
  ├── package.json
  └── src
  │   └── index.js # 项目入口js
  └── webpack.config.js # webpack配置文件
  • 各个文件内容如下: 
      <!-- dist/index.html -->
  <!DOCTYPE html>
  <html>

  <head>
      <title>React Webpack Babel Setup</title>
  </head>

  <body>
      <div id="app"></div>
      <script src="bundle.js"></script>
  </body>

  </html>

      // src/index.js
  console.log('React Webpack Babel Setup Working!');

配置webpack

  • 接下来, 我们要配置webpack, 打包src中的js文件到一个bundle.js的文件中, 给index.html引用.

  • 安装webpack.

      npm install --save-dev webpack webpack-dev-server webpack-cli

  • 在webpack.config.js中配置webpack.

      const path = require('path')

  module.exports = {
      mode: 'development',
      entry: [
          './src/index.js'
      ],
      output: {
          path: path.resolve(__dirname, '/dist'),
          publicPath: '/',
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: './dist'
      }
  };
  • 在package.json中加入start脚本. 
      "scripts": {
    "start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js"
  }

  • 运行npm start启动项目. 打开浏览器访问http://127.0.0.1:8080, 我们可以看到我们在控制台输出了React Webpack Babel Setup Working!, 表明我们的index.js已经成功的打包到了bundle.js中.
    注意:由于我们在webpack中配置mode为development, 我们用的也是webpack-dev-server, 因此我们不能在dist目录中看到bundle.js这个文件.
    关于如何打包生成生产环境文件的问题, 我们将在本文下面的章节中提到.

    tips: 修改js文件试试, webpack-dev-server会自动编译并刷新浏览器哦.
    tips: 在执行npm start的时候请确保没有其他程序占用8080端口, webpack-dev-server似乎在端口被占用时不会报错.

安装babel

  • 我们使用react的时候, 用到了es6(即es2015)和jsx, 因此需要用到babel将这些代码编译成浏览器能执行的es5代码.

  • 安装react, react-dom, babel和必要的babel组件以及css和style的loader.

      npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom css-loader style-loader
  • 创建.babelrc文件. 
      {
      "presets": [
          "es2015",
          "react"
      ]
  }
  • 在webpack.config.js中加入babel的配置和css/style的配置. 
      ...
  module: {
      rules: [
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
      },
      {
          test: /\.css$/,
          exclude: /^node_modules$/,
          loader: 'style-loader!css-loader',
      }]
  },
  resolve: {
      extensions: ['*', '.js', '.jsx']
  },
  ...

  • 在index.js中加入react代码.

      import React from 'react';
  import ReactDOM from 'react-dom';

  const title = 'React Webpack Babel Setup Complete!';

  ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
  );

  • 由于修改了webpack和babel的配置, 我们需要执行npm start重启项目, 然后就可以在浏览器上看到React Webpack Babel Setup Complete!了.

    到此为止,我们的react环境就搭建完成了, 主要用到了webpack和babel以及基于他们的一些组件.

生产环境

webpack为我们提供了很多生产环境的代码优化, 包括代码压缩等. 配置生产环境的构建命令非常容易, 为我们的package.json增加一个build的script: "build": "webpack --mode production". 然后在命令行执行npm run build就可以在dist目录下看到一个bundle.js文件了.

参考资料