用 webpack 和 Parcel 分別搭建第一個 ReactApp

時間 2019-12-05

標籤 webpack parcel 分別搭建第一個 reactapp 简体版

原文原文鏈接

學習 React 能夠用如下方法直接建立一個 ReactApp ,本文主要介紹如何手動用 Webpack 和 Parcel 來搭這個環境。html

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

使用淘寶 NPM 鏡像

使用 React、Webpack、Parcel、babel 這些工具須要安裝不少依賴包，不走代理的話速度會很是慢，也很容易出錯，因此這裏推薦使用淘寶的 npm 鏡像來安裝，速度很是理想。

使用淘寶鏡像安裝 npm 包只須要兩步便可：node

安裝 cnpm

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

使用 cnpm 來安裝包

只須要將 npm 替換成 cnpm 便可得到高速下載。

$ cnpm install [name]

下文中給出的全部安裝依賴包的命令都使用 cnpm 安裝的。你也能夠用 npm。react

用 webpack 開始第一個 React

初始化一個 json 配置文件

$ npm init -y

在 scripts 裏面添加以下內容：webpack

"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

全局的和當前文件夾的最好都裝上。web

$ 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

爲了方便，如下全部文件都建在同一個文件夾下面。npm

新建 webpack.config.js 並添加如下內容json

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 便可。babel

附上個人 package.json 文件，直接執行 cnpm install 就能安裝全部依賴。app

{
  "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 裏面添加以下內容：dom

"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 並無從新加載網頁。