1. 技术文章
  2. RAP、Mock.js、Vue.js、Webpack

RAP、Mock.js、Vue.js、Webpack

由 隐身守侯 提交于 2020-12-18 03:34:05

最近做项目使用的是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

  1. RAP

    • RAP 是一个 GUI （可视化）API管理工具，通过分析接口结构，动态生成模拟数据，校验真实接口正确性， 围绕接口定义，通过一系列自动化工具提升协作效率。在 RAP 中，可以定义接口的 URL、请求 & 响应细节格式等等。还提供 MOCK 服务、测试服务等工具，帮助开发团队提高开发效率。RAP使用手册
    • API是什么？ 即Application Programming Interface，应用程序编程接口
    • API管理工具是什么？ 在前后端分离的开发模式下，为了方便前后端之间接口的展现和调用，提高开发效率，为了让测试人员更好的根据接口文档进行测试，通常需要定义一份API接口文档来规范接口的具体信息，如一个请求的地址、参数、参数名称及类型含义等等。 API管理工具可以帮助我们管理这些接口，现在常用 API 管理工具有 Swagger、RAP、NEI、eolinker、EasyAPI、SosoApi、Postman 等。

  2. 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
    }
  ]
})

  1. 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周报（可订阅）

  2. 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
            })
  ],
};
  1. 使用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
标签
javascript
Webpack
Mock.js
Vue.js
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!