天天看點
傳回

搭建react的架手架

1、回顧

cnpm i @vue/cli -g ----- 4的腳手架 ------ webpack 4

cnpm i @vue/cli@3 -g ----- 3的腳手架 ------ webpack 4

vue create myapp

cnpm i vue-cli -g ----- 2的腳手架 ------ webapck 3

vue init webpack myapp

  • cnpm i @vue/cli-init -g ------ 3、4 相容 2的寫法

vue init webpack myapp

17年使用vue-cli 2的腳手架，用的是webpack3，指令為vue init webpack myapp

18年使用@vue/cli 3的腳手架，用的是webpack4，指令為vue create myapp

新的腳手架相容舊的版本建立項目，使用子產品 @vue/cli-init

2 和 3 的差別可以說是 webpack 3和 webpack4的差別

webpack4 免配但可配，webpack3 必配

vue的腳手架 基于 webpack4 免配的

react的腳手架 基于 webpack4 配置的

2、webpack的配置 --- webpack 3

基于node，子產品化、元件化開發的利器，配置名稱為 webpack.config.js

webpack起初是facebook專門為react而量身打造的，後開源，其他語言也在用

2.1 建立檔案 webpack.config.js 

module.exports = {
}

2.2 建立入口檔案 src/main.js 

console.log('hello webpack')

2.3 配置檔案配置入口 

module.exports = {
  // entry: './src/main.js' // string類型寫法
  entry: { // object 類型寫法 ---- 推薦寫法
    app: './src/main.js' // 會将本項目打包成為一個js檔案  app.js
  }
}

2.4 配置檔案配置輸出 

module.exports = {
  // entry: './src/main.js' // string類型寫法
  entry: { // object 類型寫法 ---- 推薦寫法
    app: './src/main.js' // 會将本項目打包成為一個js檔案  app.js
  },
  // +++++++++++++++++++++++++++++++++++++++++++
  output: { // 輸出配置 ----- dist/app.js
    path: __dirname + '/dist', // 項目打包在dist目錄下
    filename: '[name].js' // [name] 表示變量，如果入口确定名字app，輸出就是app.js
  }
}

2.5 安裝依賴，測試此項配置

cnpm i webpack@3 -g

指令行輸入 webpack 指令 即可打包, dist/app.js出現

2.6 建立頁面index.html，引入導出的js檔案，檢視效果 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
<!-- ++++++++++++++++++++++++++ -->
<script src="dist/app.js"></script>
</html>

2.7 配置自動導入js檔案，類似vue

  • 删除 index.html 中導入js檔案
  • 給webpack的配置添加 插件，使用插件導入js 
module.exports = {
  // entry: './src/main.js' // string類型寫法
  entry: { // object 類型寫法 ---- 推薦寫法
    app: './src/main.js' // 會将本項目打包成為一個js檔案  app.js
  },
  output: { // 輸出配置 ----- dist/app.js
    path: __dirname + '/dist', // 項目打包在dist目錄下
    filename: '[name].js' // [name] 表示變量，如果入口确定名字app，輸出就是app.js
  },
  // ++++++++++++++++++
  plugins: [ // 添加插件 ---- 數組

  ]
}
  • cnpm i webpack@3 -D 基礎子產品 ---- 必須安裝
  • cnpm i html-webpack-plugin -D 
const webpack = require('webpack'); // ++++++++++++++++
const HtmlWebPackPlugin = require('html-webpack-plugin');// ++++++++++++++++
module.exports = {
  // entry: './src/main.js' // string類型寫法
  entry: { // object 類型寫法 ---- 推薦寫法
    app: './src/main.js' // 會将本項目打包成為一個js檔案  app.js
  },
  output: { // 輸出配置 ----- dist/app.js
    path: __dirname + '/dist', // 項目打包在dist目錄下
    filename: '[name].js' // [name] 表示變量，如果入口确定名字app，輸出就是app.js
  },
  plugins: [ // 添加插件 ---- 數組
    // ++++++++++++++++++++++++++
    new HtmlWebPackPlugin({ // 執行個體化一個 html 的webpack的插件
      template: 'index.html' // 找的就是目前檔案夾下的index.html檔案
    })
  ]
}

重新執行webpack指令，發現dist檔案夾下生成一個index.html檔案，并且自動引入了生成的js檔案

2.8 打包項目前先壓縮js檔案 - 插件

  • 複制頁面引入js前添加壓縮js插件 
plugins: [ // 添加插件 ---- 數組
    // ++++++++++++++  無需安裝額外子產品，基于webpack的基礎子產品
    new webpack.optimize.UglifyJsPlugin(), // 壓縮js檔案
    new HtmlWebPackPlugin({ // 執行個體化一個 html 的webpack的插件
      template: 'index.html' // 找的就是目前檔案夾下的index.html檔案
    })
  ]

控制台運作webpack，重新打包檢視app.js已為壓縮過的js檔案

3、js檔案中引入css檔案 ---- css檔案作為子產品使用

3.1 建立src/main.css 

html {
  background-color: #f66;
}

3.2 src/main.js處引入css檔案 

import './main.css'; // +++++++++++++++++++
console.log('hello webpack')

運作指令webpack，發現以下錯誤,需要安裝合适解析器去解析css子產品文法

ERROR in ./src/main.css
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.

3.3 配置webpack的解析器 

const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
  // entry: './src/main.js' // string類型寫法
  entry: { // object 類型寫法 ---- 推薦寫法
    app: './src/main.js' // 會将本項目打包成為一個js檔案  app.js
  },
  output: { // 輸出配置 ----- dist/app.js
    path: __dirname + '/dist', // 項目打包在dist目錄下
    filename: '[name].js' // [name] 表示變量，如果入口确定名字app，輸出就是app.js
  },
  plugins: [ // 添加插件 ---- 數組
    new webpack.optimize.UglifyJsPlugin(), // 壓縮js檔案
    new HtmlWebPackPlugin({ // 執行個體化一個 html 的webpack的插件
      template: 'index.html' // 找的就是目前檔案夾下的index.html檔案
    })
  ],
  // +++++++++++++++++++
  module: { // 各類解析器 css / scss/ less/ stylus / 背景圖檔 / 字型圖示....
    rules: [ // 解析器規則

    ]
  }
}

3.4 安裝css子產品的解析器

cnpm i style-loader css-loader@0 -D

3.5 配置css的解析器 

module: { // 各類解析器 css / scss/ less/ stylus / 背景圖檔 / 字型圖示....
    rules: [ // 解析器規則
      {
        test: /\.css$/, // 處理的是以css為結尾的css子產品
        loader: 'style-loader!css-loader' // 從右到左解析，将css檔案由css-laoder轉換成樣式表，将樣式表由style-loader添加到dist/index.html内，在檢視頁面效果時才可見 --- 渲染到了頁面中的head标簽内部
      }
    ]
  }

4、scss子產品解析器配置

cnpm i node-sass sass-loader@7 -D
  • 建立src/main.scss檔案 
html {
  background: #00f;
}
  • src/main.js引入scss檔案 
import './main.scss';
console.log('hello webpack')
  • 報錯 同上
  • 添加scss配置資訊 
module: { // 各類解析器 css / scss/ less/ stylus / 背景圖檔 / 字型圖示....
    rules: [ // 解析器規則
      {
        test: /\.css$/, // 處理的是以css為結尾的css子產品
        loader: 'style-loader!css-loader' // 從右到左解析，将css檔案由css-laoder轉換成樣式表，将樣式表由style-loader添加到dist/index.html内，在檢視頁面效果時才可見 --- 渲染到了頁面中的head标簽内部
      },
      // +++++++++++++++++++++
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }

運作webpack,浏覽頁面，發現為藍色，表明scss配置成功

5、less子產品解析器配置

cnpm i less less-loader -D
  • 建立src/main.less檔案 
html {
  background: #0f0;
}
  • src/main.js引入less檔案 
import './main.less';
console.log('hello webpack')
  • 報錯 同上
  • 添加scss配置資訊 
module: { // 各類解析器 css / scss/ less/ stylus / 背景圖檔 / 字型圖示....
    rules: [ // 解析器規則
      {
        test: /\.css$/, // 處理的是以css為結尾的css子產品
        loader: 'style-loader!css-loader' // 從右到左解析，将css檔案由css-laoder轉換成樣式表，将樣式表由style-loader添加到dist/index.html内，在檢視頁面效果時才可見 --- 渲染到了頁面中的head标簽内部
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      // +++++++++++++++++++
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      }
    ]
  }

運作webpack,浏覽頁面，發現為綠色，表明less配置成功

6、stylus子產品解析器配置

cnpm i stylus stylus-loader -D
  • 建立src/main.stylus檔案 
html{
  background: #000;
}
  • src/main.js引入stylus檔案 
import './main.stylus';
console.log('hello webpack')
  • 報錯 同上
  • 添加stylus配置資訊 
module: { // 各類解析器 css / scss/ less/ stylus / 背景圖檔 / 字型圖示....
    rules: [ // 解析器規則
      {
        test: /\.css$/, // 處理的是以css為結尾的css子產品
        loader: 'style-loader!css-loader' // 從右到左解析，将css檔案由css-laoder轉換成樣式表，将樣式表由style-loader添加到dist/index.html内，在檢視頁面效果時才可見 --- 渲染到了頁面中的head标簽内部
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      // +++++++++++++++++++
      {
        test: /\.stylus$/,
        loader: 'style-loader!css-loader!stylus-loader'
      }
    ]
  }

運作webpack,浏覽頁面，發現為黑色，表明stylus配置成功

7、配置js的解析器

其實最重要的就是解析js的進階文法，讓他可以在浏覽器中通路

cnpm i babel-core@6 babel-loader@7 -D

如果要使用js最新的文法，那麼需要安裝相應的子產品并且配置

env 包含了 es2015 以及 es7.....

cnpm i babel-preset-es2015 babel-preset-env -D

如果需要做react應用，還需安裝子產品

cnpm i babel-preset-react -D

根目錄下建立 檔案 .babelrc, 檔案可以省，但是配置不能省，省是配置到了webpack的配置檔案

{
  "presets": ["es2015", "env", "react"]
}

添加js的解析器

module: { // 各類解析器 css / scss/ less/ stylus / 背景圖檔 / 字型圖示....
    rules: [ // 解析器規則
      {
        test: /\.css$/, // 處理的是以css為結尾的css子產品
        loader: 'style-loader!css-loader' // 從右到左解析，将css檔案由css-laoder轉換成樣式表，将樣式表由style-loader添加到dist/index.html内，在檢視頁面效果時才可見 --- 渲染到了頁面中的head标簽内部
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.stylus$/,
        loader: 'style-loader!css-loader!stylus-loader'
      },
      // +++++++++++++++++++++++++++++++
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }

8、媒體檔案、字型檔案、背景圖檔解析器的配置

cnpm / npm i file-loader url-loader -D

添加相關配置資訊

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: path.posix.join('static','img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: path.posix.join('static', 'media/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]')
  }
}

9、webpack開發伺服器

  • vue 項目中 npm run serve 啟動開發者伺服器
  • webpack 可以配置開發者伺服器

cnpm i webpack-dev-server@2 -g

cnpm i webpack-dev-server@2 -D

控制台運作 webpack-dev-server 指令，檢視效果

修改代碼繼續檢視效果，發現代碼會自動更新

10、配置開發者伺服器

10.1 資料請求

cnpm i axios -S

src/main.js 處請求資料，遇到跨域問題

import './main.css';
import axios from 'axios';
console.log('hello webpack! 開發者伺服器')
axios.get('http://47.92.152.70/pro').then(res => {
  console.log(res.data)
})
  • 添加webpack的配置選項 devServer 
devServer: { // 開發者伺服器配置
    host: '0.0.0.0', // 預設值是127.0.0.1,改為0.0.0.0之後區域網路内可以通過ip位址通路
    port: 8080, // 預設通路伺服器的端口号
    // open: true, // 打開預設浏覽器，一般設定為false
    proxy: { // 解決跨域問題
      '/api': {
        target: 'http://47.92.152.70', // 代理哪一個伺服器
        changeOrigin: true, // 代理
        pathRewrite: {
          '^/api': '' // 以 /api 開頭的請求，認為就是請求的代理
          // /api/pro   ===> http://47.92.152.70/pro
        }
      }
    }
  }

修改請求代碼,檢視效果

axios.get('/api/pro').then(res => {
  console.log(res.data)
})

11、添加伺服器的啟動指令

  • package.json檔案中添加scripts選項 
"scripts": {
  "dev": "webpack-dev-server",
  "build": "webpack"
},

12、配置@符号 

resolve: {
  extensions: ['.js', '.vue', '.jsx'], // 代表預設的字尾名，引入時可以省略的字尾名 --- import axios from './request'; 而不用 import axios from './request.js';
  alias: { // 别名
    '@': path.join(__dirname, './', 'src') // src 的别名為 @
  }
}

13、webpack + vue

webpack配置别名

resolve: {
    extensions: ['.js', '.vue', '.jsx'], // 代表預設的字尾名，引入時可以省略的字尾名 --- import axios from './request'; 而不用 import axios from './request.js';
    alias: { // 别名
      '@': path.join(__dirname, './', 'src'), // src 的别名為 @
      // +++++++++++++++++++++++++++
      'vue$': 'vue/dist/vue.esm.js' // 打包vue項目必須得寫的别名
    }
  }
  • 安裝vue的依賴

cnpm i vue -S

cnpm i vue-loader@14 vue-template-compiler -D

配置vue檔案的解析器

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

剩下的就是普通的vue的項目開發

14、初體驗react

cnpm i react react-dom -S

15、複習es6的文法

15.1 es6 class

補充webpack配置

通過運作不同的指令，表示不同的環境

cnpm i cross-env -D

修改packages.json

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },

修改webpack.config.js

const isDev = process.env.NODE_ENV =='development'
plugins: [ // 添加插件 ---- 數組
  new webpack.optimize.UglifyJsPlugin(), // 壓縮js檔案
  new webpack.DefinePlugin({ // ++++++++++++++
    'process.env':{
      NODE_ENV:isDev?'"development"':'"production"',
    }
  }),
  new HtmlWebPackPlugin({ // 執行個體化一個 html 的webpack的插件
    template: 'index.html' // 找的就是目前檔案夾下的index.html檔案
  })
],
css html 解析器
上一篇: logistic模型 python_機器學習模型4 Logistic回歸-基于Python sklearn的實作
下一篇: logistic回歸分析 r_Logistic回歸模型與R

繼續閱讀