使用webpack和babel搭建react開發環境

時間  2019-12-05
標籤 使用 webpack babel 搭建 react 開發環境 欄目 React 简体版
原文   原文鏈接

譯文,原文來自https://scotch.io/tutorials/s...
寫在前面,使用webpack已經蠻長一段時間,可是在新項目開始之際,都是東拼西湊其餘項目的配置來使用,若是要本身從零開始寫一個完整項目的webpack配置估計得費死勁,因此在webpack發佈2.x版本之際,正是時候來認真從零開始學習webpack了javascript

React是一個出自facebook的js庫,用於構建用戶交互界面.是一個很是厲害的有不少優點的庫,可是卻有着很是陡峭的學習曲線.當我開始嘗試它,最令我困擾的是,大部分的教程都略過了React開發環境的搭建.css

譯者注: 若是隻針對react,你大能夠不使用webpack,能夠嘗試create-react-app,它幫你處理了大部分問題,本文主要使用webpack.html

因此讓咱們開始吧,這篇文章很是適合那些懼怕沾手react開發環境所需的繁瑣的配置而經常採起東湊西拼方式的新手.個人第一個目標就是保持這篇文章簡潔易懂.我不會使用任何模板文件,而且你能在github repo上找到完整的設置.咱們會使用如下技術:java

  • Webpack - 模塊打包器node

  • Babel - javascript編譯器react

  • ES6 - 相對較新的javascript的標準webpack

  • Yarn - 包管理器git

  • Reactgithub

在這邊文章結束以前,咱們將設置好一個React的開發環境以及一個簡單的打印hello world的頁面.web

去擁抱樂趣吧!!

前置準備

在開始項目以前咱們須要先安裝Yarn和Node到咱們的機器上.

就如上面提到的,咱們將使用Yarn作爲包管理器.它其實和npm至關類似,並且也提供和npm幾乎同樣的命令行工具.在此之上還有一些npm所不具有的額外的特性.或許你會感到不解,我列舉了幾個使用Yarn的主要緣由 :

  • 若是你以前已經安裝了某個package,你能在沒有網絡請求的狀況下再次安裝.意味着你能離線安裝package,而且大大減小你安裝依賴所需的時間.

  • 任何機器安裝時都會有相同的依賴關係,意味着一個機器的運行的安裝過程也會以一樣的方式運行在其餘機器上.

若是要了解更多的話,能夠去看看Yarn的文檔.

Mac Os的用戶能夠放心使用下面的命令安裝Yarn,覺得我已經爲大家先行嘗試過了,使用其餘操做系統的能夠去查看Yarn的安裝說明,以便正確地安裝Yarn.

> brew update
> brew install yarn

開始入門

打開你的終端建立一個新文件夾.你能夠隨意命名這個文件夾.進入文件夾後經過yarn init命令初始化項目,yarn init就像npm init同樣,會給你提示,只要不停按回車或按你的意願配置就能夠了.

> mkdir hello-world-react
> cd hello-world-react
> yarn init

當yarn init命令完成後你能看到你的文件夾(此例中爲'hello-world-react')多了一個新的文件package.json,就像npm init的執行結果同樣.

安裝及配置Webpack

下面咱們須要安裝webpack和一些依賴.

> yarn add webpack webpack-dev-server path

能夠發如今當前文件夾下建立了一個新文件yarn.lock.Yarn用這個文件來鎖定準確的依賴關係,以保證在其餘機器上也能以相同的方式運行.咱們不用放心思在這個文件中由於它是自動生成的.

如今咱們已經安裝了webpack了,咱們須要一個配置文件來告訴webpack應該要作什麼.在項目文件夾中建立一個新文件webpack.config.js,而後用你喜歡的編輯器打開它.

> touch webpack.config.js

而後更改配置文件:

/*
    ./webpack.config.js
*/
const path = require('path');
module.exports = {
  entry: './client/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

基本上,使用webpack咱們須要制定一個entry入口和output輸出.

  • entry: 指定入口文件,即打包器開始構建流程的地方.

  • output: 指定打包後的文件應該存放的位置.

不管如何,咱們同時還須要loaders.經過它們咱們能讓瀏覽器可以理解而且運行jsx以及用ES6標準書寫的代碼.

  • loaders: 會把咱們應用上須要用到的文件進行轉化.

配置中的loaders接受一個loader的數組.咱們須要指定babel-loader把除去node_module文件夾之外的全部.js及.jsx文件進行轉化.若是須要的話你老是能添加更多的loader.舉個例子,若是你項目有單獨的樣式文件(如css)須要處理,那你會須要用到CSS loader.全部的這些loaders能在webpack的文檔中找到.大方隨意去作各類嘗試吧.

Babel設置

咱們在webpack配置中指明瞭使用babel-loader.但這個babel-loader又是從哪來呢?接下來咱們就要把它下載並進行一些設置.

> yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

咱們安裝了咱們所須要的全部依賴.注意咱們添加了babel-preset-es2015和babel-preset-react,presets是babel的插件,它會告訴babel須要把哪些部分轉化成原生的javascript.

而後咱們須要去設置babel,設置babel能夠經過添加一個.babelrc文件來完成.

> touch .babelrc

而後作如下改動

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

就這樣.當webpack調用babel-loader時它會知道該對文件作什麼處理了.

設置咱們的react組件

到目前爲止,咱們的目錄結構是這樣的

.
|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

你不以爲是時候開始添加React的支持了嗎?咱們建立一個新文件夾client,以後再往這文件夾裏面添加index.js和index.html.

> mkdir client
> cd client
> touch index.js
> touch index.html
> cd ..

如今目錄結構是這樣的

.
|-- client
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

接下來讓咱們寫點代碼吧.咱們用一些簡單的語句來驗證下咱們的配置是否能正確運行吧.

編輯index.js

/*
    ./client/index.js
    which is the webpack entry file
*/
console.log('Hey guys and ladies!!')

編輯index.html

<!--
    ./client/index.html
    basic html skeleton
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root">

    </div>
  </body>
</html>

index.html會用來在瀏覽器加載並展現咱們的React組件.我前面提到過咱們須要babel來編譯咱們的代碼以便瀏覽器運行.咱們將用ES6以及JSX語法來編寫React組件的代碼.由於這個兩個語法都沒有獲得瀏覽器很好的支持,因此咱們須要用babel-loader來幫助咱們處理,然後再進行打包輸出的結果纔是咱們最終在index.html加載的代碼.

要把打包完成的代碼添加到咱們的html文件,其中一個方法是手動插入一個script標籤並指定打包後的文件的位置到src屬性.一個更加好的作法是經過一個叫html-webpack-plugin的插件幫助咱們自動完成上面的工做.這個插件提供了一個簡單的方式來根據咱們的html文件模板生成咱們最終須要的html文件.咱們只須要關心html文件模板便可,而後經過一些簡單配置它就能幫咱們完成script的插入.讓咱們開始動手吧.

Html-Webpack-Plugin

首先咱們須要安裝這個插件.在項目的根目錄下運行終端.而後執行如下命令

> yarn add html-webpack-plugin

而後編輯webpack.config.js添加一些配置.

/* 
    ./webpack.config.js
*/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {

...

module: {
    loaders: [
        ...
    ]
},
// add this line
plugins: [HtmlWebpackPluginConfig]
}

其實配置自己已經很是清晰了.咱們導入了html-webpack-plugin插件,而且建立了一個該插件的實例,再指定template爲咱們的html模板.filename便是最終經過這個插件生成的html文件的文件名.inject: body告訴插件把js標籤添加到body的結束標籤以前.

運行!

咱們快要完成了.讓咱們嘗試去運行咱們的配置.在此以前先作點微小的工做.打開package.json並添加一個start script.

/*
    ./package.json
*/
{
  "name": "hello-world-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",

  // add the scripts key to your package.json

  "scripts": {
    "start": "webpack-dev-server"
  },

  "dependencies": {
  ...
  },
  "devDependencies": {
  ...
  }
}

而後咱們能在終端上執行如下命令

> yarn start

而後打開瀏覽器並訪問http://localhost:8080/,打開控制檯你應該能夠能夠看出輸出"Hey guys and ladies!!".使用localhost:8080是由於webpack-dev-server啓動了一個開發服務器.注意webpack-dev-server會在咱們執行yarn start時運行.

圖片描述

成功運行了!讓咱們來添加一些簡單React組件看看會發生什麼.

React, React, React(重說三)

我會建立一個很是簡單的Hello World的React組件.咱們須要安裝React的依賴.

> yarn add react react-dom

接下來在client文件夾中添加一個components文件夾.並建立一個App.jsx.

> cd client
> mkdir components 
> cd components
> touch App.jsx
> cd ../..

如今咱們的目錄結構是這樣子的

.
|-- client
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

React的組件命名約定俗成地使用首字母大寫的駝峯式命名規則.因此咱們文件的名字也是有個大寫字母開頭.後綴既能夠是jsx也能夠是js.我以爲當要使用jsx語法時最好仍是明確的使用jsx做爲後綴.

接下來編輯App.jsx文件

/*
    ./client/components/App.jsx
*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}

最後爲了把咱們的組件渲染到咱們的頁面上.把index.js的console.log替換成如下的代碼

/* 
    ./client/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

打開終端再次運行咱們的項目,確認終端當前目錄爲項目的根目錄.

> yarn start

圖片描述

這就對了!很是高興你完成咱們一開始的目標!!

總結

如今咱們已經搭好React的開發環境了.我但願這篇教程能讓你明白這些配置是怎麼一回事以及爲何咱們須要這些配置.同時,若是每一個項目都須要那麼多配置的話,你能夠fork個人repo並以此爲基礎來改動.

請大膽嘗試不一樣的webpack配置,若是發現了很是cool的東西也歡迎在評論低下留言.(譯者注: 原文地址 https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel#conclusion)

最後,在這個教程以後你可以而且應該嘗試去完成一個深度的React的項目.Wow~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程