DefinePlugin插件用法理解

时间: 2019-10-30阅读: 454标签: 插件

一、官方定义:

DefinePlugin

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处,设置它,就可以忘记开发环境和生产环境构建的规则。

new webpack.DefinePlugin({
  // Definitions...
});

用法 

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。

  • 如果这个值是一个字符串,它会被当作一个代码片段来使用。
  • 如果这个值不是字符串,它会被转化为字符串(包括函数)。
  • 如果这个值是一个对象,它所有的 key 会被同样的方式定义。
  • 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

这些值会被内联进那些允许传一个代码压缩参数的代码中,从而减少冗余的条件判断。

new webpack.DefinePlugin({
  PRODUCTION: jsON.stringify(true),
  VERSION: jsON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_html5: true,
  TWO: '1+1',
  'typeof window': jsON.stringify('object'),
  'process.env.NODE_ENV': jsON.stringify(process.env.NODE_ENV)
});
console.log('Running App version ' + VERSION);
if(!BROWSER_SUPPORTS_html5) require('html5shiv');
When defining values for process prefer 'process.env.NODE_ENV': jsON.stringify('production')over process: { env: { NODE_ENV: jsON.stringify('production') } }. Using the latter will overwrite the process object which can break compatibility with some modules that expect other values on the process object to be defined.  

注意,因为这个插件直接执行文本替换,给定的值必须包含字符串本身内的实际引号。通常,有两种方式来达到这个效果,使用 '"production"', 或者使用 jsON.stringify('production')。  


二、个人分析

1、官网中说的“可以使用这个插件定义一些编译时的全局常量”

编译时这几个字很重要,webpack会根据配置文件将将入口文件解析、打包、转译为浏览器可识别的js文件最后输出到出口,而他转译的过程其实就是webpack编译过程,也就是官网说的编译时。  

2、官网中说的“插件会直接替换文本”

 > 在编译过程中(转译为浏览器可识别的js文件时),会将源文件中所有用到DefinePlugin中定义的常量的地方直接替换为对应的值文本,注意,是文本无论语义上是对象还是字符串还是函数,都直接作为文本替换过去。

示例1:

假设在配置文件中定义编译时全局常量 process.env.firstName

new webpack.DefinePlugin({
  'process.env.firstName': jsON.stringify("ShuiTao")
});

源文件index.js内容如下

console.log(process.env.firstName)

最终转译后的js文件

console.log('ShuiTao')

可以看到,在编译生成新js文件时,将process.env.firstName常量直接替换成了他对应的值文

示例2:

假设在配置文件中定义编译时全局常量 process.env.info

new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
    name:'ShuiTao',
    age:23
}) });

源文件index.js内容如下

console.log(process.env.info)

最终转译后的js文件

console.log({
      name:'ShuiTao',
      age:23
})

可以看到,在编译生成新js文件时,将process.env.info常量直接替换成了他对应的值文本

示例3:

假设在配置文件中定义编译时全局常量 process.env.info

new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
    name:'ShuiTao',
    age:23
}) });

源文件index.js内容如下

console.log(process.env);
console.log(process.env.info);

最终转译后的js文件

console.log(process.env);
console.log({
      name:'ShuiTao',
      age:23
});

可以看到,在编译生成新js文件时,将process.env.info常量直接替换成了他对应的值文本,而process.env没有被替换,因为没有在DefinePlugin定义process.env

运行最终转译后的js文件时,process.env指向的是Node中的process,在process.env中找不到info属性,足以证明在DefinePlugin定义的process.env.info和Node的process没有任何关系,他只是一个在插件中定义的编译时的常量,编译后就已经被替换了,因此 理解清楚概念,他只是个编译时的常量,转译后就会被替换,只是恰好常量的名字是process.env.info

作者:水涛  

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6680

解决游览器安装Vue.js devtools插件无效的问题

打开自己写的一个vue.js网页,发现图标并没有亮起来,还是灰色;打开自己写的一个vue.js网页,游览器上图标有了 ,但是控制台不显示;解决方案:

Vue中的JS与Velocity.js的结合

JS动画效果,注意事件函数中所传递的传递的参数及某些事件函数返回的函数1.进入动画钩子:before-enter,enter,after-enter;2.离开动画钩子:before-leave,leave,after-leave;3.在enter钩子中的函数调用done

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

关于 tapable 你需要知道这些

在阅读 webpack 前如果不了解 tapable 的话,很有可能会看得云里雾里,那么 tapable 到底是什么,又有什么用呢?本文主要介绍 tapable 的使用以及相关实现,通过学习 tapable 能够进一步的了解 webpack 的插件机制

实现一个vue-router插件

要想自己实现一个vue-router插件,就必须先了解一下vue-router插件的基本使用,我们在使用vue-router的时候,通常会定义一个router.js文件,里面主要就是干了以下几件事:

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

babel里transform-runtime插件的作用

ransform-runtime 是为了方便使用 babel-runtime 的,它会分析我们的 ast 中,是否有引用 babel-rumtime 中的垫片(通过映射关系),如果有,就会在当前模块顶部插入我们需要的垫片。transform-runtime 是利用 plugin

chrome插件开发

上手调试:打开chrome://extensions/ 开启开发者模式,选择加载已解压的扩展程序,选中自己的项目文件即可上手调试;引入vue 会出现 安全性问题,需要在manifest.json中设置

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广