Source-map | 易学教程

vue+sentry 前端异常日志监控

阅读更多关于 vue+sentry 前端异常日志监控

敲代码最糟心不过遇到自己和测试的环境都OK，客户使用有各种各样还复现不了的问题，被逼无奈只能走到这一步：前端异常日志监控! vue官方文档如下推荐：就是说， vue有错误机制处理 errorHandler （错误机制处理也有 errorCaptured ），而Sentry利用这个钩子函数提供了集成。那接下来就是使用了，首先我们点一下上图中的官方集成四个大字，来到了sentry官方文档（中关于VUE的文档）： https://sentry.io/for/vue/ 。 Get Started！鉴于我跟着前人各种教程走过不少的坑，我这笔记是要多啰嗦有多啰嗦的。一、注册及创建项目。注册地址： https://sentry.io/signup/?platform=vue 选择vue，创建项目。创建项目之后会出现详细步骤：按照上图指示，在项目目录下安装：@sentry/browser 和 @sentry/integrations： # Using yarn $ yarn add @sentry /browser # Using npm $ npm install @sentry /browser # Using yarn yarn add @sentry /integrations # Using npm npm install @sentry

webpack实战入门

阅读更多关于 webpack实战入门

webpack 1. webpack 就是一个js程序的打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 2. Webpack就是负责从我们指定的一个文件为入口，以入口文件为基础，然后依据环环相扣的关系，把我们写的每个需要使用的功能模块找到，构建出一个依赖关系，然后把它们优化、压缩、打包，最后生成最完美的文件。 3.webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性 webpack打包的好处 1. 程序员在开发的时候需要更好的代码布局，比如有空格、有换行、有注释、错落有致 2. 浏览器望能更快的解析代码，而不是更好的看懂代码。所以Webpack的主要作用就是压缩、优化我们写的代码，把多余的东西去掉，然后按照浏览器喜欢的风格来编排代码！ webpack的使用 1. 新建项目空白目录运行 npm init -y命令初始化包管理配置文件 package.json 2. 新建src源代码目录，将项目的源代码放在这个目录下 3. 安装webpack npm i webpack webpack-cli -D - 在package.json文件的devDependencies中出现了安装的webpack和webpack-cli，就代表安装成功 3. 在项目的根目录自行创建 webpack.config.js

Node.js 深度调试指南

阅读更多关于 Node.js 深度调试指南

在 Node.js 项目开发过程中，随着项目的发展，调用关系越来越复杂，调试工具的重要性日益凸显。 Node(v6.3+)集成了方便好用 V8 Inspect 调试器，允许我们通过 Chrome DevTools 进行图形化的调试和性能分析。同时，我们也可以使用 VS Code，Webstorm 等支持的编辑器对 Node.js 程序进行调试。 Node Inspect 要想启动调试器，我们需要在启动 Node.js 应用程序时传入 --inspect 标志，也可以使用该标志提供自定义的端口，例如 --inspect=9222 将会在 9222 端口上接受开发者工具的连接。一段简单的代码 function log() { let a = 1 ; console.log(a); a = 2 ; console.log(a); } log(); 使用 node --inspect 启动这时我们会发现，程序直接执行完成了，没有中断，导致我们无法使用 Chrome DevTools 进行调试。对于这种直接执行的代码，我们可以使用 --inspect-brk 参数，在应用程序代码的第一行终端，然后再进行调试。 Chrome DevTools 当开启 Node 调试后，我们可以打开 Chrome，访问 chrome://inspect ，在 Devices 中查找到我们的 Node

vue.config.js配置优化

阅读更多关于 vue.config.js配置优化

vue.config.js完整代码如下： 'use strict' ; // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path' ); const resolve = (dir) => path.resolve(__dirname, dir); // 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' ; // gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin' ); const cdn = { // 忽略打包的第三方库 externals: { vue: 'Vue' , vuex: 'Vuex' , 'vue-router': 'VueRouter' , axios: 'axios' , }, // 通过cdn方式使用 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js' , 'https://cdn.bootcss.com/vue-router

vue-cli 3 以后没有config文件打包文件目录需要在根目录增加 vue.config.js文件

阅读更多关于 vue-cli 3 以后没有config文件打包文件目录需要在根目录增加 vue.config.js文件

【asp.net core 系列】5 布局页和静态资源

阅读更多关于【asp.net core 系列】5 布局页和静态资源

0. 前言在之前的4篇的内容里，我们较为详细的介绍了路由以及控制器还有视图之间的关系。也就是说，系统如何从用户的HTTP请求解析到控制器里，然后在控制器里处理数据，并返回给视图，在视图中显示出来。这一篇我将为大家介绍基础的最后一部分，布局页和静态资源引入。 1. 布局页在控制器和视图那一篇，我们了解到 _ViewStart 里设置了一个Layout属性的值，这个值正是用来设置布局页的。所谓的布局页，就是视图的公用代码。在实际开发中，布局页通常存放我们为整个系统定义的页面框架，视图里写每个视图的页面。回顾一下，默认的 _ViewStart 里的内容是： @{ Layout = "_Layout"; } 默认的布局页指定的是名为 _Layout 的布局页，在本系列第三篇中，我们得知这个视图应当在Shared文件夹下，那我们进去看一下这个视图有什么内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - MvcWeb</title> <link rel="stylesheet" href="~/lib

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思？

阅读更多关于 webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思？

Webpack 有非常多的概念，很多名词长得都差不多。我把这些分散在文档和教程里的内容总结起来，写了一份 webpack 中的易混淆知识点，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习。全集链接 ➡️ webpack 易混淆知识点 sourse-map ，里面都有个 map 了，肯定是映射的意思。sourse-map 就是一份源码和转换后代码的映射文件。具体的原理内容较多，感兴趣的同学可以自行搜索，我这里就不多言了。我们先从官网上看看 sourse-map 有多少种类型： emmmm，13 种，告辞。如果再仔细看一下，就发现这 13 种大部分都是 eval 、 cheap 、 inline 和 module 这 4 个词排列组合的，我做了个简单的表格，比官网上直白多了：参数参数解释 eval 打包后的模块都使用 eval() 执行，行映射可能不准；不产生独立的 map 文件 cheap map 映射只显示行不显示列，忽略源自 loader 的 source map inline 映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件 module 增加对 loader source map 和第三方模块的映射还不明白？可以看看 demo。我们对 webpack 做一些配置，devtool 是专门配置

Webpack常见问题总结

阅读更多关于 Webpack常见问题总结

一、有哪些常见的Loader raw-loader ：加载文件原始内容（utf-8） file-loader ：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体) url-loader ：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值时返回其 publicPath，小于阈值时返回文件 base64 形式编码 (处理图片和字体) source-map-loader ：加载额外的 Source Map 文件，以方便断点调试 svg-inline-loader ：将压缩后的 SVG 内容注入代码中 image-loader ：加载并且压缩图片文件 json-loader 加载 JSON 文件（默认包含） babel-loader ：把 ES6 转换成 ES5 ts-loader : 将 TypeScript 转换成 JavaScript style-loader ：将 CSS 代码注入 JavaScript 中，通过 DOM 操作去加载 css-loader ：加载 CSS，支持模块化、压缩、文件导入等特性 eslint-loader ：通过 ESLint 检查 JavaScript 代码更多 Loader 请参考官网：https://webpack.docschina.org/loaders 二、常见的Plugin

搭建node服务（三）：使用TypeScript

阅读更多关于搭建node服务（三）：使用TypeScript

JavaScript 是一门动态弱类型语言，对变量的类型非常宽容。JavaScript使用灵活，开发速度快，但是由于类型思维的缺失，一点小的修改都有可能导致意想不到的错误，使用TypeScript可以很好的解决这种问题。TypeScript是JavaScript的一个超集，扩展了 JavaScript 的语法，增加了静态类型、类、模块、接口和类型注解等功能，可以编译成纯JavaScript。本文将介绍如何在node服务中使用TypeScript。一、安装依赖 npm install typescript --save npm install ts-node --save npm install nodemon --save 或者 yarn add typescript yarn add ts-node yarn add nodemon 另外，还需要安装依赖模块的类型库： npm install @types/koa --save npm install @types/koa-router --save … 或者 yarn add @types/koa yarn add @types/koa-router … 二、 tsconfig.json 当使用tsc命令进行编译时，如果未指定ts文件，编译器会从当前目录开始去查找tsconfig.json文件，并根据tsconfig

【转载】vue cli 3.0下配置开发环境下的sourcemap

阅读更多关于【转载】vue cli 3.0下配置开发环境下的sourcemap

转载： https://blog.csdn.net/u010341392/article/details/90209946 问题描述 vue cli 3.0环境下开发调试过程中发现部分vue的源码找不到，调试窗口中同名字的vue文件最多只能出现一个，而且文件的位置也不对应相应的文件夹，直接在webpack://根目录下罗列出来问题分析因为是用的vue cli 3.0版本，与2.x的配置文件改变了很多，所以老版本的配置不能复制过来使用。网上查找了很多资料，都是提的配置productionSourceMap为true，如下，然而我的工程里一开始就已经将该项配置为true，结果还是如上所述， module.exports = { productionSourceMap: true, } 1 2 3 也在官网上看了vue cli 3.0版本详细配置说明，也是描述productionSourceMap为开发环境源码配置项，然结果显然说明不是的于是各种查找，各种尝试，各种研究，最终总算是成功了，配置如下： const debug = process.env.NODE_ENV !== 'production' module.exports = { ……//自己的其他配置 configureWebpack: config => { if (debug) { // 开发环境配置 config

订阅 Source-map