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

2018-04-15 admin

学习 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 包只需要两步即可:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

只需要将 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 文件中。

创建测试文件

import React from 'react';  
import ReactDOM from 'react-dom';  
  ReactDOM.render(  
    <h1>我的第一个react例子</h1>,  
    document.getElementById('root')  
  ); 
<!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 就会报错。

创建测试文件

import React from 'react';  
import ReactDOM from 'react-dom';  
  ReactDOM.render(  
    <h1>我的第一个react例子</h1>,  
    document.getElementById('root')  
  ); 
<!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 来说足够了。

相关文章
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
搜狐发力html5让用户更爽,自媒体人更嗨
曾经有资深互联网分析师说过”2015年,新闻综合类 APP 如果还没有大量的个性化阅读功能,将被淘汰出局。”枣哥非常同意此观点,移动互联网时代已经席卷全球,移动互联网代表的就是个性张扬的时代,在互联网圈说道个性张扬首先想到的是搜狐老板张朝阳...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
回到顶部