RAP、Mock.js、Vue.js、Webpack

最近作項目使用的是RAP1的接口，可是昨天開始，RAP1 出現了問題，接口都不能用了。
因此補充一下Mock.js的用法，以便在這種突發的狀況時候時本身經過Mock的方式來處理接口。

1. npm init
   • npm init是用來裝package.json的
   • npm init --yes安裝一個默認的package.json
   • 在安裝一個要打包到生產環境的安裝包時，你應該使用npm install —save，若是你在安裝一個用於開發環境的安裝包（例如，linter, 測試庫等），你應該使用npm install —save-dev。
   • 如使用以下代碼，則會自動在文檔中添加一個dependencies模塊（這些包在生產中須要）

   $ npm install mockjs -S
   或者
   $ npm install mockjs --save

   • 如使用以下代碼，則會自動在文檔中添加一個devDependencies模塊（這些包用於開發和測試）

   //安裝到你項目的目錄
   $ npm install webpack -D
   //全局安裝  不建議用
   $ npm install -g webpack

2. RAP
   • RAP 是一個 GUI （可視化）API管理工具，經過分析接口結構，動態生成模擬數據，校驗真實接口正確性， 圍繞接口定義，經過一系列自動化工具提高協做效率。在 RAP 中，能夠定義接口的 URL、請求 & 響應細節格式等等。還提供 MOCK 服務、測試服務等工具，幫助開發團隊提升開發效率。RAP使用手冊
   • API是什麼？
     即Application Programming Interface，應用程序編程接口
   • API管理工具是什麼？
     在先後端分離的開發模式下，爲了方便先後端之間接口的展示和調用，提升開發效率，爲了讓測試人員更好的根據接口文檔進行測試，一般須要定義一份API接口文檔來規範接口的具體信息，如一個請求的地址、參數、參數名稱及類型含義等等。
     API管理工具能夠幫助咱們管理這些接口，如今經常使用 API 管理工具備 Swagger、RAP、NEI、eolinker、EasyAPI、SosoApi、Postman 等。
3. Mock.js
   • Mock.js 用於生成隨機數據，攔截 Ajax 請求。Mock.js示例
   • 當RAP的接口不能使用的時候要怎麼處理？

   //下載Mock，並在頁面引入Mock
   import Mock from mock.js
   let Random = Mock.Random
   let data = Mock.mock({
     "lists|6": [
    {
      "id|10000-99999": 1,
      "img": "@image(178x178,@color)",
      "name": "@ctitle",
      "price|1-100.2-2": 1
    }
     ]
   })

4. Vue.js
   Vue.js介紹
   • 安裝vue-clinpm install vue-cli -g
   • 項目初始化vue init webpack demo
   • 項目運行起來npm run dev
   • 打包的命令npm run build，打包完成後目錄下會多一個dist的文件夾
   • 項目目錄結構調整（src）：
     在開發路徑src下增長modules和pages文件夾，分別存放模塊和頁面有關頁面的全部文件都放到同一文件夾下就近管理：index.html(頁面模板)、main.js(頁面入口文件)、App.vue(頁面使用的組件，公用組件放到components文件夾下)、router(頁面的路由配置)、assets(頁面的靜態資源)都移到index文件夾下，並把main.js改成index.js,保證頁面的入口js文件和模板文件的名稱一致。
   • 配置webpack：
     在build/utils.js中添加兩個方法：webpack多入口文件和多頁面輸出基礎結構搭建
   • 去vue的github看examples，其中重點須要寫出來todomvc。vue-loader、vue-router2（路由）必看。vuex（狀態管理了解便可）。vue週報（可訂閱）
5. webpack
   • nodejs中的一個工具。Webpack至關因而模塊打包機：它能項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），將其轉換和打包爲合適的格式供瀏覽器使用。
   • 下載webpack npm install webpack -D
   • 下載webpack-cli，用於在命令行中運行webpack npm install webpack webpack-cli —-save-dev
   • 打包 node_modules/.bin/webpack 入口文件路徑 打包文件存放地址,如node_modules/.bin/webpack src/app.js dist/bundle.js
   • 更方便的打包方法只須要輸入webpack（全局安裝）或者node_modules/.bin/webpack（本地安裝）便可，方法以下：

   //創建一個文件‘webpack.config.js’，文件中代碼以下：
   module.exports = {
    entry:  __dirname + "入口文件地址",
    output: {
        path: __dirname + "打包後的文件存放路徑",
        filename: "打包後輸出文件的文件名"
    }
   }
   //其中’__dirname’ 是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

   • 更加方便的打包方法輸入npm start便可，方法以下：

   //package.json中對scripts對象進行設置
   {
    "name": "webpack-sample-project",
    "version": "1.0.0",
    "description": "Sample webpack project",
    "scripts": {
        "start": "webpack" // scripts中的內容換成這個
    },
    "author": "he",
    "license": "ISC",
    "devDependencies": {
        "webpack": "3.10.0"
    }
   }

   • 一個比http-server好用的服務anywhere
     • npm i -g anywhere裝一個anywhere，做用是調試用，能直接打開頁面，比http-server好的地方是會自動在瀏覽器打開，不用手動複製IP。可是當anywhere的時候ctrl C後就不能繼續用這個IP了，不ctrl C又須要從新開一個命令行，解決辦法，用anywhere的時候用如右命令便可anywhere &
   • package.json之entry
     • entry 參數能夠接受字符串、對象、函數（也能夠接受Promise，resolve()出想要的東西就可）
     • command.js中設置configFile.watch = true;，能夠動態的監視html內代碼的改動
   • package.json之output

   const path =require('path');
   let base = {
    index: ./index.js
   };
   //webpack2 提供了多種配置方案
   module.exports = {
    output: {
        //導出目錄
        path: path.resolve(__dirname, 'dist'),
        //異步內容的導出目錄。實際用的時候通常都會寫成CDN
        publicPath: "/output/dist/",   // server-relative
        //包規範格式
        libraryTarget:'umd', //有umd，這個包的會兼容commonjs、amd等
        library: "MyLibrary", //一個包即一個變量var MyLibrary
        //文件名 通常用於異步加載
          chunkFilename:'[chunkhash]_[name].js',
        //hash位數
        hashDigestLength:3,
        //導出文件  
        //hash ==> webpack編譯過程（如用hash多個文件的前三位hash值同樣）
        //chunkhash => webpack對每一個文件的hash，每次文件改動hash值的改變
        filename: '_[name][chunkhash].js' 
    }
   };

   • package.json之module

   module.exports = {
    module:{
        //rules裏面的東西是對文件進行預處理
        //文件處理的通常路徑是：entry-->rules-->webpack-->output
        rules:[
        // Conditions, Results and nested Rules.
        {
            //若是知足這個正則，再用use去處理
            test: /\.jsx?$/,
            //加這句的目的是，若是知足正則的內容是在node_modules目錄下，則不需用use去處理它
            exclude: [
                'node_modules'
            ],
            // flags to apply these rules, even if they are overridden (advanced option)
            // loader: "babel-loader",  這種方式也能夠用，用來兼容用的
            // rule.use是數組形式和rule.loaders是它的別名
            use:[{
                loader: "babel-loader",
            }]
        },
        ]
    }
   };

   • package.json之resolve

   module.exports = {
    //一個js引用別的js的時候能夠用resolve。
    //別名的好處是更加利於代碼的維護
    resolve:{
        alias:{
            //path.resolve()返回一個絕對路徑
            test:path.resolve(__dirname,'test/test/test.js')
        }
    },
    module:{
        rules:[
        ]
    }
   };

   • package.json之devtool

   module.exports = {
        //能讓咱們更好的在原文件進行debugger
        // https://webpack.js.org/configuration/devtool/#devtool
        devtool:'source-map',   //eval也能夠用
        // https://webpack.js.org/configuration/target/#target
        target:"web"
   };

   • package.json之loader

   module.exports = {
     module:{
    rules:[
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                use: {
                  loader:'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:{
                        loader:'css-loader',
                        options: {
                           sourceMap: true
                        }
                    }
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader',{
                        loader:'less-loader',
                        options: {
                           sourceMap: true
                        }
                    }]
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader',{
                        loader:'sass-loader',
                        options: {
                           sourceMap: true
                        }
                    }]
                })
            },
            {
                test: /\.(png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                use: {
                    loader:'file-loader',
                    options:{
                        name:'[name]_[sha512:hash:base64:7].[ext]'
                    }
                }
            },
            {
                test: /\.html/,
                use:{
                    loader:"html-loader",
                    options:{
                        minimize: false,
                        attrs:false
                    }
                }
            }
    ]
     }
   };

   • package.json之plugins

   module.exports = {
    //Webpack lifecycle Webpack編譯的不一樣階段。plugins嵌入每一個Webpack lifecycle去作一些個性化的行爲
     // webpack lifecycle :before-complitaion run done =>
     plugins:[
            new webpack.ProvidePlugin({
                $: 'jquery'
            }),
            new WebpackNotifierPlugin({
                title: 'Webpack 編譯成功',
                contentImage: path.resolve(process.cwd(), './img/avatar.jpeg'),
                alwaysNotify: true
            }),
            new ExtractTextPlugin({
                filename: "[name].css",
                disable: false,
                allChunks: true
            }),
              //若是用了CommonsChunkPlugin則必須先引用common後面的文件纔會生效。因此要先引用common再引入index
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common',
                minChunks: Infinity
            })
     ],
   };

6. 使用webpack時注意⚠️：
   • webpack拋出警告以下警告：

   WARNING in configuration
   The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment

   • 緣由：Webpack 4新增了mode選項，它用來表示構建代碼的兩種默認狀況：開發與產品。
     • development：開發模式，webpack會默認配置經常使用於開發的參數，如輸出運行時的錯誤信息。
     • production：產品模式，webpack會默認配置經常使用語產品構建的餐宿，如壓縮代碼等。使用這兩種模式的默認配置，用戶能夠實現零配置。
   • mode選項能夠在webpack.config.js配置文件裏指定，也能夠在webpack cli命令上指定：

   //配置文件
   mode: 'development' 
   mode: 'production'

   //命令行
   $ webpack —mode development 
   $ webpack —mode production