#ReactApp項目構建流程【1】

小白的ReactApp項目構建流程【環境搭建與HelloWorld】

• 開發環境：win10
• 開發軟件：webstorm

建立新項目（空文件夾）

• 當前目錄下（之後以home表示）執行cmd

  webstorm上直接alt+F12便可彈出控制檯

• $npm init

  項目初始化，文件夾下新增package.json文件

• $npm i webpack

  安裝webpack

• $npm i react

  安裝react

• $npm i react-dom -S

  其中 
  -S就是--save的簡寫，就行npm默認一個start的字段，你能夠沒必要輸入npm run start 而只需輸入npm start，這兩個效果是同樣的。
  -D就是--save-dev 這樣安裝的包的名稱及版本號就會存在package.json的devDependencies這個裏面，
  而--save會將包的名稱及版本號放在dependencies裏面。

• 在home下，新建build文件夾，同時內建webpack.config.js

  放置配置文件，webpack的config文件，以及一些腳本文件

• 在home下，新建client文件夾，同時內建app.js以及App.jsx

  放置客戶端文件，app.js做爲應用入口，App.jsx用於聲明整個應用頁面上的內容

• 修改webpack.config.js以及package.json,給app.js添加測試代碼

  [package.json]  
  ->start
  {
    "name": "react-learn",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
          "build":"webpack --config build/webpack.config.js"  
          //scripts-build：
           指定webpack的config文件，實際執行時須要刪除此代碼，不然會報錯
           package.json mustbe actual JSON, not just JavaScript.由於json不識別註釋
    },
    "author": "zc",
    "license": "ISC",
    "dependencies": {
      "react": "^16.2.0",
      "webpack": "^3.10.0"
    }
   }
  ->End
  
  
  [webpack.config.json] 
  ->start
  const path = require('path');
  module.exports = {
      entry: {                                     //資源文件的路徑，打包時的入口
          app: path.join(__dirname,'../client/app.js')
      },
      output: {                                    //輸出的目錄
          filename: "[name].[hash].js",            //[]表明變量,hash用於刷新緩存
          path: path.join(__dirname,'../dist'),    //輸出文件存放的路徑
          publicPath: '/public'                    //靜態資源文件引用的路徑的前綴              --/public/app.hash.js,用於區分靜態資源/API請求,還能夠直接修改成cdn路徑
      }
  }
  -> End
  
  [app.js]
  ->start
  alert(123);
  ->end

• $npm run build

  打包完成，文件結構內出現dist目錄而且生成項目文件

• 編寫App.jsx

  import  React from 'react'
    
  export default class App extends React.Component{
      render(){
          return(
              <div>Hello World </div>
          )
      }
  }
  //tips:
  1：若是未出現智能提示，
  Settings->Languages&Frameworks->Node.js and NPM->Coding Assistance->Enable 便可
  2：jsx內快速書寫html標籤：tab鍵

• $npm i react-dom -S

  用於將react組件渲染到dom中

• 修改app.js,用於將react組件渲染到dom中

  import ReactDOM from 'react-dom'
  import App from './App.jsx'
  ReactDOM.render(App,document.body)  
      //將App掛載在document.body中，由於此時並無模板，只有body可使用，官方推薦在body中建立一個默認 節點做爲主dom

• 修改webpack.config.js

  與output同級添加webpack解析模塊
  
  module: {                           //添加模塊，讓webpack識別jsx代碼(非標準js語法)
      rules: [
          {
              test:/.jsx$/,           //正則表達式，react項目設置爲全部的符合test正則的文件
              loader: 'babel-loader'  //識別符合test正則的文件的loader，babel是編譯各類最新js語法的工具，react指定工具
          }
      ]
  }

• $npm i babel-loader -D

  開發的工具使用 -D加載提供給開發者的develope版本模塊

• $npm i babel-core-D

  babel-loader只是webpack的插件，其核心仍是babel-core，須要安裝

• $npm run build

  此時運行會報錯誤，由於babel默認直接編譯es6語法而不能支持jsx,須要配置babel編譯模式->

• root目錄下新建.babelrc文件並編輯

  {
   "presets": [  //表明babel支持的語法,由於語法太多，因此babel-core中並未包含es2015
           ["es2015",{"loose":true}],//鬆散類型，非嚴格類型
           "react"                   //babel只編譯有react選項的代碼
       ]
   }

• $npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react -D

• 刪除老dist目錄後 ->npm run build

  新生成的dist目錄中的[name].[hash].js文件會很是大，由於react源碼會被編譯其中，
  其中最底下的代碼就是開發者本身編寫的代碼

• $npm i html-webpack-plugin -D

  想要在瀏覽器中打開本身編譯好的軟件，須要安裝此插件
  
  本人安裝成了 webpack-html-plugin 233

• 引用html-webpack-plugin【最簡單的引用方式】

  在webpack.config.js頂部添加代碼
  
  const HTMLPlugin=require('html-webpack-plugin')
  
  同時添加與module同級的選項
  
  plugins:[
      new HTMLPlugin();//webpack編譯時生成HTML頁面，而且把全部的entry選項都注入到HTML頁面中，
                          而且filename,path和publicPath都是基於output選項進行拼接而成
  ]

• $npm run build

  能夠看到在dist目錄中出現webpack編譯成的HTML頁面
  
  由於此時並未起服務器/路徑映射,所以此時路徑將會出現問題,沒法訪問資源文件
  
  刪除dist目錄,將webpack.config.js->output->publicPath置爲空,使webpack使用絕對路徑編譯文件
  
  從新 build,用HTML進入編譯好的HTML文件
  
  會發現仍然沒有內容,F12發現報錯
     --報錯1:不能直接將react組件掛載在document.body上,但這並非影響運行的錯誤
     --報錯2:ReactDOM.render時,也須要用jsx語法編寫
  
      其實,jsx文件使用的js語法是es6的語法,而在app.js中含有jsx代碼,也就是說app.js代碼中實際使用的是
  ES6+jsx代碼,以前只是對jsx用babel編譯成ES2015代碼,而ES6文件並未作此處理,所以須要webpack.config.
  js->rules修改test,用於將ES6語法編譯成ES2015,將現有的test /.jsx$/ -> /.(jsx|js)$/後,再執行
  [npm run build],此時會報錯,緣由是在[root -> node_modules]下的文件在npm init加載時已經通過編譯,
  因此此文件夾下的js代碼須要過濾,那麼在rules中新添加test用於[過濾非node_modules]文件夾下的js文件

• 修改webpack.config.js->npm run build

  {
         test:/.js$/,
         loader: 'babel-loader',
         exclude:[
              path.join(__dirname,'../node_modules')
            ]
    }

• 打開HTML,報錯,顯示React未定義

  貼上錯誤代碼
  _reactDom2.default.render(React.createElement(_App2.default, null), document.body);
  
  在app.js中,引入了jsx標籤,必需要引入React,由於jsx代碼最終翻譯出來的標籤都會用到React

• 在app.js中引入React

  import React require('react')

• $npm run build

  進入HTML,OJBK,順利顯示Hello World

小結:

後續再寫