用 webpack 和 Parcel 分别搭建第一个 ReactApp

头像
xnng
    阅读 5 分钟
    2

    学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动用 Webpack 和 Parcel 来搭这个环境。

    $ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app
$ npm start

    使用淘宝 NPM 镜像

    使用 React、Webpack、Parcel、babel 这些工具需要安装很多依赖包，不走代理的话速度会非常慢，也很容易出错，所以这里推荐使用淘宝的 npm 镜像来安装，速度非常理想。

    使用淘宝镜像安装 npm 包只需要两步即可：

    • 安装 cnpm
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 使用 cnpm 来安装包
    只需要将 npm 替换成 cnpm 即可获得高速下载。
    $ cnpm install [name]

    下文中给出的所有安装依赖包的命令都使用 cnpm 安装的。你也可以用 npm。

    用 webpack 开始第一个 React

    初始化一个 json 配置文件

    $ npm init -y

    在 scripts 里面添加如下内容：

    "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

    安装 React

    $ cnpm install react react-dom --save

    安装编译工具 babel

    $ cnpm install babel-preset-env babel-preset-react babel-loader --save-dev

    安装打包工具 wepback

    全局的和当前文件夹的最好都装上。

    $ cnpm install webpack webpack-cli --save-dev
$ cnpm install webpack-dev-server --save-dev
$ cnpm install webpack webpack-cli -g
$ cnpm install webpack-dev-server -g

    配置 webpack

    为了方便，以下所有文件都建在同一个文件夹下面。

    新建 webpack.config.js 并添加以下内容

    const path = require('path');
module.exports = {
    // index.js是入口文件
    entry: path.resolve(__dirname, './index.js'),
    output: {
        path: path.resolve(__dirname, ''),
        filename: "./bundle.js"
    },
    mode: 'development',
    // ip 和端口配置
    devServer: { 
        host: "127.0.0.1", 
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["env", "react"]
                }
            }
        ]
    }
};
    这个 presets: ["env","react"] 也可以单独配置在 .babelrc 文件中。

    创建测试文件

    • 新建 index.js 文件
    import React from 'react';  
import ReactDOM from 'react-dom';  
  ReactDOM.render(  
    <h1>我的第一个react例子</h1>,  
    document.getElementById('root')  
  );
    • 新建 index.html 文件
    <!DOCTYPE html>  
 <html>  
  <head>  
    <meta charset="UTF-8" />  
    <title>example</title>  
  </head>  
  <body>  
    <div id="root"></div>  
    <script src="./bundle.js"></script>  
  </body>  
 </html>

    启动

    最后执行 npm start 即可。

    附上我的 package.json 文件，直接执行 cnpm install 就能安装所有依赖。

    {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1"
  },
  "devDependencies": {
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  }
}

    如果要换端口的话，修改下 webpack.config.js 文件的 port 值就可以了。

    用 Parcel 开始第一个 React

    初始化一个 json 配置文件

    $ npm init -y

    在 scripts 里面添加如下内容：

      "scripts": {
    "start": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
    parcel 是运行 html 文件的，而不是 js。

    安装 React

    $ cnpm install react react-dom --save

    安装编译工具 babel

    $ cnpm install babel-preset-env babel-preset-react babel-core --save-dev

    安装打包工具 Parcel

    全局的和当前文件夹的最好都装上。

    $ cnpm install parcel-bundler --save-dev
$ cnpm install -g parcel-bundler

    配置 babel

    为了方便，以下所有文件都建在同一个文件夹下面。

    新建文件 .babelrc ，添加以下内容：

    {
  "presets": ["env"]
}
    这里面只添加 env 即可，如果添加了 react 就会报错。

    创建测试文件

    • 新建 index.js 文件
    import React from 'react';  
import ReactDOM from 'react-dom';  
  ReactDOM.render(  
    <h1>我的第一个react例子</h1>,  
    document.getElementById('root')  
  );
    • 新建 index.html 文件
    <!DOCTYPE html>  
 <html>  
  <head>  
    <meta charset="UTF-8" />  
    <title>example</title>  
  </head>  
  <body>  
    <div id="root"></div>  
    <script src="./index.js"></script>  
  </body>  
 </html>

    启动

    最后执行 npm start 即可。

    附上我的 package.json 文件，直接执行 cnpm install 就能安装所有依赖。

    {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.7.0"
  }
}

    可以看出来，用 parcel 跟 webpack 刷新内容的方式也不一样，parcel 并没有重新加载网页。

    如果要改端口的话，启动命令需要改成：$ parcel index.html -p 端口，例如：parcel index.html -p 8081。

    总结

    本文分别展示了 如何用 webpack 和 Parcel 搭建第一个 ReactApp，虽然部分内容有重复，但你可以清晰地看到它们之间的差别。

    相对于 webpack 来说 parcel 在启动之更新内容是不重新加载网页的，只刷新更改的内容，速度比 webpack 快很多。

    同时，parcel 也脱离了配置文件，使用非常方便，但这既是优点也是缺点，没有配置文件在功能上可能没有 webpack 那么强大，但是对于学习 react 来说足够了。

    parcelwebpackreact.js
    xnng
    224 声望16 粉丝
    « 上一篇
    Docker 入门（二）：从实例来看 Dockerfile 和 Compose
    下一篇 »
    Docker 入门（三）：持续集成、持续部署

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    让 Vuepress 支持图片放大功能

    xnng赞 5阅读 8.9k评论 7

    头像
    一些react使用小技巧（上）

    夕水赞 10阅读 1.3k

    头像
    一个简易的DIY场景H5框架

    Undefined_0赞 5阅读 5k

    头像
    一些react使用小技巧（中）

    夕水赞 7阅读 848评论 4

    头像
    webpack的入门教程

    小蚊酱赞 2阅读 2.1k

    头像
    一些react使用小技巧（下）

    夕水赞 4阅读 880评论 3

    头像
    深入浅出React中的refs

    夕水赞 3阅读 1.1k

    0 条评论
    得票最新