Source-map

前言 ： 在4月25日，我参加了前端早早聊的在线直播话题---前端如何搞监控。 听完之后收获很大。我将把会议总结为前端搞监控的价值、需要监控的内容等方向去描述，并以自研监控SDK的经验为例，进一步了解前端搞监控的技术点所在。 一 前端监控系统概览： 1 为什么要做一套前端监控系统？ 通过用户行为采集分析，当前端及客户端线上出现异常时，可以通过用户行为链及设备环境，快速定位线上环境的问题所在。 齐次，当功能上线后，用户的使用效果没办法衡量。需要数据指标去衡量，比如功能使用率、性能指标等。 业务方的对业务的创意及需求需要反复不断的调优、开发，相同的组件开发了无数个，很可能明天又得改回去，这就造成了大量的资源浪费。如果没有一个量化体系的话，运营只能通过上次成功的经验来感觉。所以需要通过对用户数据的监控，从而得到一个调优策略和量化指标。 之后，我们需要知道对于界面设计风格及投放的广告资源，哪些手段会更有价值，去做一个人群的细分，提高用户体验。 2.前端监控需要监控什么？ 前端监控采集的内容主要包括行为分析、异常监控、性能监控等。 其行为分析主要有：页面的进入、离开、点击、滚屏、自定义事件 简单做法是在项目的编译过程中，将项目ID、页面ID等挂载在标签上，当进入页面时，我们就可以根据这些ID去定位唯一一个页面，这样就可以知道用户的页面进入、离开及按钮的点击等事件 在这张图里可以看到上报的数据

一、前言 　　Vue-cli3 搭建的项目 相比较Vue-cli2界面相对较为简洁，之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配呢？ 二、基本配置 　　只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录） const path = require('path' ) module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false , // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md // webpack配置 chainWebpack: (config) => { }, configureWebpack: (config) => { if (process.env.NODE_ENV === 'production' ) { // 为生产环境修改配置... config.mode = 'production' } else { // 为开发环境修改配置... config.mode = 'development' } Object.assign(config,

什么是Loader? 继上两篇文章webpack工作原理介绍（ 上篇 、 下篇 ）,我们了解到 Loader：模块转换器，也就是将模块的内容按照需求装换成新内容 ，而且每个Loader的职责都是单一，只会完成一种转换，所以我们一般对源文件的处理，也是由多个Loader以链式顺序执行的方式来进行多次装换，然后得到我们要的结果。 那么这样Loader只需要关心输入和输出，Loader其实是一个Node.js模块，该模块导出的是一个函数（意味着，所有node.js的api我们都可以使用），如下： module.exports = function (source) { // 对source做一系列的转换 return source; } 下面我们介绍一下webpack提供了哪些供Loader调用的api，对Loader有个比较深刻的理解，然后来分析 babel-loader 的源码，看看我们常用的loader是怎么编写出来的。 获得Loader的options const loaderUtils = require('loader-utils'); module.exports = function(source) { // 获取用户为当前Loader传入的options console.log(loaderUtils.getOptions(this)); return source;

【今日推荐】：为什么一到面试就懵逼！>>> 文章目录 一、项目初始化 二、项目精简 三、项目配置 源码调试 四、项目结构 前端框架搭建 | 「小慕读书」管理后台 一、项目初始化 vue-element-admin mkdir aimooc-book-admin-dev cd aimooc-book-admin-dev git clone https://github.com/PanJiaChen/vue-element-admin cd vue-element-admin cnpm i npm run dev 报错：Cannot find module ‘core-js/modules/es6.regexp.constructor’ 解决：cnpm i -D core-js@2 二、项目精简 删除 src/views 下的源码，保留： dashboard：首页 error-page：异常页面 login：登录 redirect：重定向 对 src/router/index 进行相应修改 删除 /* Router Modules */ 下面的4条import 删除如下相关路由： documentation guide profile permission page directive role icon componentsRouter,chartsRouter

module.exports = { // 部署应用时的基本 URL baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: 'dist', // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: '', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath: 'index.html', // 默认在生成的静态资源文件名中包含hash以控制缓存 filenameHashing: true, // 构建多页面应用，页面的配置 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时，template 中的 title

钉钉前端团队原创，点击右上角关注我们，了解更多前端技术 作者: 烛象 引言 在JavaScript蓬勃发展的今天，ES6/7、typescript已经成为代码编写的标配。 上一篇文章，我们介绍了钉钉IDL和自动生成typescript定义的工具，本文将会介绍AST相关js知识:babel。 关于babel 一句话阐述什么是babel: babel是一个主要用于将ES2015+版本的代码编译成向下兼容(比如ES5/ES3)js版本的编译器。 // Babel Input: ES2015 arrow function [ 1 , 2 , 3 ].map( ( n ) => n + 1 ); // Babel Output: ES5 equivalent [ 1 , 2 , 3 ].map( function ( n ) { return n + 1 ; }); 复制代码 结合实际使用场景，我们接触到的babel使用方式一般为 .babelrc/babel.config.json （babel配置文件） babel-loader (webpack/rollup等) 然而，.babelrc的每一块配置后面究竟代表着babel怎样的处理方式，这个估计很少有人能讲得清楚。 babel知识体系 1、主要组件 源代码到AST: babel/parser（前身为babylon） 依赖acorn

3 月，跳不动了？>>> 「 观感度：🌟🌟🌟🌟🌟 」 「 口味：清蒸鲈鱼 」 「 烹饪时间：15min 」 本文已收录在 Github github.com/Geekhyt ，欢迎Star。 从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做足了准备，很有信心征服面试官。不出我所料，面试官被我引入了我擅长的领域。 ❝ 看来你对Webpack很熟悉，那我来考考你 ❞ 0.有哪些常见的Loader？你用过哪些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

3 月，跳不动了？>>> 「 观感度：🌟🌟🌟🌟🌟 」 「 口味：清蒸鲈鱼 」 「 烹饪时间：15min 」 本文已收录在 Github github.com/Geekhyt ，欢迎Star。 从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做足了准备，很有信心征服面试官。不出我所料，面试官被我引入了我擅长的领域。 ❝ 看来你对Webpack很熟悉，那我来考考你 ❞ 0.有哪些常见的Loader？你用过哪些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

前言 在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。 输出产物 构建一个库与构建一个一般应用最大的不同点在于 构建完成后输出的产物 。 一般应用构建完成后会输出： 一个 html 文件 一个 js 入口 chunk 、若干子 chunk 若干 css 文件 若干其它资源，如图片、字体文件等 虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。 一个库构建完成后会输出： 一个 CommonJS 格式的 js 文件 一个未压缩的 UMD 格式的 js 文件 一个已压缩的 UMD 格式的 js 文件 可能包括若干的 css 文件 可能包括若干的其它资源文件 库的入口分别是上面罗列的 js 文件；你可能会奇怪，一个库怎么会有3个入口文件呢？莫急，且听我一一道来。 CommonJS CommonJS 是 Node.js 推行的一种模块化规范，主要语法包括 module.exports 、 require() 等；而我们在使用 webpack 引入 npm 包时，实际上是处于 Node.js 环境，由此可知，这个 CommonJS 格式的入口 js 文件

1.console.log，console.info和console.error常见 2.alert，阻塞，少用，有点out 3.在代码中加入debugger，后面要记得移除 onClick:function () { debugger // 直接使用debugger打断点 this.msg = 'change' console.log('this is console.log',this.msg) } 4.在 config/index.js 文件中更改 devtool 配置为 source-map ， 详细可参考 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html module.exports = { devtool: 'source-map',//默认是：cheap-module-eval-source-map } 设置为 source-map ，则可以生成 .map 文件，在chrome浏览器中调试的时候可以显示源代码,效果如下: cheap-module-eval-source-map 选项效果： webpack中 devtool 的其它选项各代表什么呢： 参考 // https://webpack.js.org/configuration/devtool/#development eval