DefinePlugin插件用法理解

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

一、官方定义:

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.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

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

Vue添加引入jquery插件

先安装jquer插件,命令运行: npm i jquery --save-dev ;利用 expose-loader 模块 来引用jquery插件 ,命令运行: npm i expose-loade --save-dev;配置webpack.base.conf

Webpack插件开发简要

如今‘大前端’这个概念在前端界大热,说‘大前端’,我们就要提到‘前后端分离’,‘前后端分离’又离不开‘本地开发构建’,‘本地开发构建’自然离不开webpack,webpack想要工作,那它就需要各种插件的支持,O(∩_∩)O哈哈~,逗了一大圈,终于引出了主题

10款好用到爆的Vim插件

我使用Vim编辑器已经差不多20年了,不过,我是在前两年才开始使用Vim插件,我会定时清理插件,我认为这样做更有助于自己了解哪些插件才是最好的。此外,针对不同的语言和文件配置我会使用不同的插件

谷歌插件在测试的应用

随着SOA的普及,各大互联网公司都拥有自己较为成熟的分布式跟踪系统,比如Google的Dapper,Twitter的Zipkin,淘宝的鹰眼,京东的Hydra,eBay的CAL,大众点评的CAT等等:

vuedraggable:vue拖拽排序插件

最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入

babel插件的相关知识

Babel 是 JavaScript 编译器,更确切地说是源码到源码的编译器,通常也叫做“转换编译器(transpiler)”。 意思是说你为 Babel 提供一些 JavaScript 代码,Babel 更改这些代码,然后返回给你新生成的代码

vue-cli3配置webpack-bundle-analyzer插件

为优化vue项目性能,需要使用webpack-bundle-analyzer分析报文件,找出最占用空间的插件有哪些,对应做出优化,网上看了一些网站,有的写的太麻烦了,现将最简单的一种写出来供大家参考

jquery.nicescroll滚动条美化插件

今天给大家介绍一个滚动条美化插件jquery.nicescroll,这个插件有以下一个主意事项:兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera

webpack插件ProvidePlugin的使用方法和eslint配置

配置 webpack.config.js文件里 plugins 属性,配置完以后就可以在代码里直接使用 _ ,而不再需要 import; 注意:(如果不配置eslint,浏览器就会报错:\\\'_\\\' is not defined no-undef)

AnySlider:适用于任何Html内容的jQuery Slider插件

任何Slider都是一个易于使用且支持触摸的jQuery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等。在页面上包含jQuery库和jQuery AnySlider

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

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

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