webpack DefinePlugin定义属性在逻辑代码中报未定义错误

最新推荐文章于 2024-08-09 07:11:42 发布
最新推荐文章于 2024-08-09 07:11:42 发布
阅读量2.1k 收藏
点赞数
文章标签： webpack javascript python ViewUI
原文链接：https://my.oschina.net/u/259577/blog/1824706
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

最近在vue项目中想用下DefinePlugin，结果出了个很恶心的问题，如图： webpack.dev.conf.js里面加入自定义属性： 定义变量，然后在main.js里面打印这个变量： 引用 结果报错了： 报错 但是在网上找的资料这样写都是没问题的。最终让我发现了出现这个问题的根源： 根源 没错，就是eslint。 解决办法： 1.在webpack.dev.conf.js定义的地方，用对象加属性的形式，比如：“process.VERSION”:JSON.stringify("5fa3b9"); 2.在这个文件上面配置让eslint不去检查这个文件未定义的错： 解决2。 处理之后就再也不会报未定义错误了，oh yeah!

转载于:https://my.oschina.net/u/259577/blog/1824706

weixin_34273046
关注
webpack.DefinePlugin使用介绍
Jq的博客
08-06 1万+
这个插件是用来定义全局变量的 //webpack.config.js var webpack = require('webpack'); var path = require('path'); module.exports = { entry: { index: "./js/index.js" }, output: { path: "./d...
webpack定义环境变量
RookieLink
02-28 801
使用webpack定义环境变量，供全局使用
webpack配置报错WARNING in DefinePlugin Conflicting values for ‘process.env.NODE_ENV‘
weixin_42349568的博客
04-17 1万+
一，现象。 当我配置了开发，测试，生产环境的时候。执行npm run testing报错。 先上package.json的配置： "scripts": { "dev": "cross-env envMode=dev webpack serve --config ./config/webpack.dev.conf.js --color ", "testing": "cross-env envMode=testing webpack --config ./config/webpack.pr
html-webpack-plugin 使用教程
最新发布
gitblog_00005的博客
08-09 514
html-webpack-plugin 使用教程 html-webpack-pluginjantimon/html-webpack-plugin: 是一个用于简化 HTML 文件创建的 Webpack 插件，适合用于 Webpack 开发中的 HTML 文件处理和优化。项目地址:https://gitcode.com/gh_mirrors/ht/html-webpack-plugin 项目介绍 ...
webpack打包后的函数，不能访问提示未定义？？
印心石屋
12-12 4770
webpack打包后，在文件定义的变量属于内部变量。也就是说webpack把各个文件封装。。使得你无法访问 function warning(){ alert('FF') } 解决方式是给warning()定义的时候，定义成全局变量，也就是 window.warning = function(){ alert('FF') }...
webpack.DefinePlugin
weixin_44677431的博客
05-19 1528
DefinePlugin 作用 可以创建一个在编译时可以配置的全局常量。主要针对我们在编译时，区分 开发、测试、生产环境。 示例 new webpack.DefinePlugin({ PROCESS.VERSION: JSON.stringify('2.0.1'), PROCESS.ENVIRONMENT: '"dev"' }) 注： 1.值格式：因为DefinePlugin...
webpack.definePlugin
weixin_30699831的博客
11-21 185
允许你创建一个在编译时可以配置的全局常量，这可能会对开发模式和发布模式允许不同的行为非常有用。比如，你可能会用一个全局的常量来决定log在开发默认触发而不是在发布模式。 示例： new webpack.DefinePlugin({ PRODUCTION:JSON.stringfy(true), VERSION:JSON.stringfy("5fa3b9"), BROWSER_SUPPOR...
webpack选择性编译DefinePlugin（打包自动剔除测试数据）
weixin_33756418的博客
10-12 576
背景 程序在开发的过程中，少不了打印调试用的日志，测试流程时伪造的数据。这些代码是不能出现在生产环境上的。这意味着在程序打包前，需要把相关代码剔除掉。这些事情用人手去做很麻烦，很容易疏漏。而且打包出来测试时遇到了bug，又得重新把测试代码添加回去。重复整个繁琐的过程。 既然人工做这么麻烦而且容易出错，那能不能用程序帮我们完成这些事情呢？当...
webpack.DefinePlugin与cross-env区别详解
10-15
1. webpack.DefinePlugin用于在Webpack编译阶段定义环境变量，它允许你在代码编译时就替换环境变量的值，而cross-env是用于在运行时定义环境变量，它是在Node.js脚本运行时设置环境变量。 2. webpack.DefinePlugin...
babel-plugin-transform-define:类似于Webpack的DefinePlugin的babel编译时间代码替换
05-02
类似于Webpack的babel编译时间代码替换 快速开始 $ npm install --save-dev babel-plugin-transform-define .babelrc { " plugins " : [ [ " transform-define " , { " process.env.NODE_ENV " : " production ...
webpack DefinePlugin解析
郊眠寺
01-28 2906
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
eslint不校验pubilc下,ESLint no-undef和webpack插件
weixin_42366752的博客
01-13 316
I use webpack plugin:new webpack.DefinePlugin({PUBLIC_KEY:'\'XXX\'',CLIENT_ID: '\'XXXX\''})tgc.init({publicKey: PUBLIC_KEY,clientId: CLIENT_ID});I use eslint and use Disallow Undeclared Variables (no-...
idea第三方库提示Unresolved type XXX
青清一水澈
03-07 524
idea第三方库提示Unresolved type XXX
解决vue2设置cross-env设置环境变量不起作用问题
wangshuai13383347132的博客
10-12 1643
解决vue2设置cross-env设置环境变量不起作用问题
6. webpack.DefinePlugin插件学习
黄彪博客
01-20 733
文章目录DefinePlugin 介绍使用场景例子使用规则定义字符串的解决办法定义全局变量测试js 代码结果 DefinePlugin 介绍 DefinePlugin 允许创建一个在编译时可以配置的全局常量。 注意：定义在全局有用，并不是说变量是在window下面 使用场景例子 对开发环境和生产环境使用不同的配置非常有用。如在开发环境中输出日志，在生产环境中不输出日志。这就是 DefinePlug...
webpack3.6最新用法总结
mapbar_front的博客
10-08 2350
webpack的几大模块      如果说，一个webpack配置文件，我们到底需要配置的东西有什么？我觉得有这么几个重要的模块：entry（入口）、output（输出）、loaders、以及 plugins（插件）。entry：代表入口。表示webpack从哪里开始解析你的项目依赖关系。output：代表输出。表示webpack最终把你的项目打包到哪个文件中。loaders：代表你用什么东西来解析
【vite·4】vite在多环境下的配置集成方案及defineConfig（非常详细）
weixin_46769087的博客
11-14 1万+
vite在多环境下的配置集成方案及defineConfig
Webpack 设置环境变量的误区
weixin_45189747的博客
12-19 497
一、前言 日常的前端开发工作中，至少会有两套构建环境 一套开发时使用，构建结果用于本地开发调试，不进行代码压缩、打印 debug 信息、包含 sourcemap 文件等 一套发布时使用，构建结果用于线上，即代码都是压缩过的、运行时不打印 debug 信息、静态文件不包括 sourcemap 等 webpack 4.0 版本开始引入了 mode 的概念 选项 描述 dev...
vue中如何添加自定义环境变量 ，process.env取值报错undefined
热门推荐
铁锤妹妹的博客
05-31 1万+
一. 前言 我们在做vue单页应用的时候,会发现配置文件里有procsss.env字段 如果手动修改代码中加载配置文件的路径也可以，但是太麻烦，最重要的是很low 依靠环境变量,标记服务器,这样就可以根据不同的环境,配置不同环境下我们所需要的东西。 例如：后端接口的域名。 二. process.env(环境变量) console.log(process.env)；// 可以自己打印试试 process.env属性会返回包含用户环境的对象。通俗来讲，该属性可以返回项目运行环境的信息。 三. 配置环境变
webpack webpack.defineplugin
08-25
Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具。它可以将应用程序的不同模块依赖关系转化为静态资源，并且可以通过配置进行自定义的处理。 webpack.DefinePlugin 是 Webpack 提供的一个插件，用于在编译过程中创建全局常量。它允许我们在代码中定义一个全局变量，这个变量在编译时会被替换为指定的值。这在需要根据环境来进行条件编译时非常有用，比如根据开发环境和生产环境来切换不同的配置项。 使用 webpack.DefinePlugin 插件，你可以在 webpack 的配置文件中指定需要定义的常量和对应的值。在编译过程中，这些常量会被替换为指定的值，从而影响到代码的执行逻辑。 例如，你可以使用 webpack.DefinePlugin 来定义一个全局的 API_BASE_URL 变量，根据环境的不同来设置不同的值： ``` const webpack = require('webpack'); module.exports = { // ...其他配置项 plugins: [ new webpack.DefinePlugin({ API_BASE_URL: JSON.stringify(process.env.NODE_ENV === 'production' ? 'http://production-api.com' : 'http://development-api.com') }) ] }; ``` 在代码中，你可以通过使用 API_BASE_URL 变量来获取对应的值： ```javascript console.log(API_BASE_URL); // 在编译时会被替换为配置中指定的值 ``` 这样，你可以根据不同的环境来设置不同的 API 地址，而不需要手动修改代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值