热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

webpackFeatureFlag功用宣布掌握

背景许多时刻我们会不小心把当地调试的代码宣布掉,形成了线上的代码出现问题。或者说暂时不愿望某些正在开辟的代码被实行,形成线上显现的不不正常或推延上线。申明完成webpack.con

背景

许多时刻我们会不小心把当地调试的代码宣布掉,形成了线上的代码出现问题。或者说暂时不愿望某些正在开辟的代码被实行,形成线上显现的不不正常或推延上线。

申明

完成

webpack.config.js里如许写

var webpack = require('webpack');
module.exports = {
entry: {
index: "./app/index.js"
},
output: {
path: './run',
filename: "index.bundle.js"
},
plugins: [
new webpack.DefinePlugin({
__DEBUG__: true
})
],
devtool: "#inline-source-map"
};

设置完成后,我们能够如许写代码

var $ = require('./js/lib/jquery');
__DEBUG__ && console.log($);

在webpack编译后会变成这个模样

var $ = require('./js/lib/jquery');
(true) && console.log($);

宣布

这个时刻我们就要把__DEBUG__设为false了,如许在编译完成后就会变成这个模样。

var $ = require('./js/lib/jquery');
(false) && console.log($);

如许子在实行的时刻就永久不会实行调试的代码了,然后在宣布紧缩的时刻会被过滤掉。

var $ = require('./js/lib/jquery');

在大部份的紧缩中,由于这句代码相对不会被实行,因而被当成了废代码直接去除掉了。

长处

  • 是一个硬开关。假如是用js自身保护一个设置对象也能够杀青如许的结果,但代码依旧会跑到线上。运用本要领能强迫的把代码滤掉,完整的防止资本糟蹋。
  • 代码会越发有条理,功用相干的部份会有规律的群集到一同。
  • 代码上线能够更天真,没必要由于代码没有完整完成而推延上线,没有完成的功用封闭即可。
  • 天真下线。线上假若有BUG,立马封闭功用。我觉得这类要领比代码版本回滚要好很多,由于BUG能够不是上个版本发生的。

瑕玷

  • 环境须用webpack,固然其他的东西能够也能够做到。
  • 工程庞杂度增添,成员要严厉的做flag前提设置。

扩大

能够做一个功用清单,如许就有了现实的意义了。

new webpack.DefinePlugin({
__DEBUG__ : true,
__F_EDITOR__ : true,
__F_TREE_LIST__: false,
__F_SIGN_UP__ : true
})

如许就可以像做开关一样自在的开启功用点。假如设置的功用点过量,那末最好用零丁的一个文件保留。

结语

真实情况中会相称的庞杂,怎样定义还请自行依据履历推断。若有疑问和改正能够留言。


推荐阅读
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • JavaScript设计模式之策略模式(Strategy Pattern)的优势及应用
    本文介绍了JavaScript设计模式之策略模式(Strategy Pattern)的定义和优势,策略模式可以避免代码中的多重判断条件,体现了开放-封闭原则。同时,策略模式的应用可以使系统的算法重复利用,避免复制粘贴。然而,策略模式也会增加策略类的数量,违反最少知识原则,需要了解各种策略类才能更好地应用于业务中。本文还以员工年终奖的计算为例,说明了策略模式的应用场景和实现方式。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文介绍了Sencha Touch的学习使用心得,主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性,并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用,以及如何通过链接样式表来改变全局风格。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文介绍了一个适用于PHP应用快速接入TRX和TRC20数字资产的开发包,该开发包支持使用自有Tron区块链节点的应用场景,也支持基于Tron官方公共API服务的轻量级部署场景。提供的功能包括生成地址、验证地址、查询余额、交易转账、查询最新区块和查询交易信息等。详细信息可参考tron-php的Github地址:https://github.com/Fenguoz/tron-php。 ... [详细]
author-avatar
特贰的大妞
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有