Vue,React 打包上线去除 打印日志 console.log 等...

1.Vue

插件安装:

npm install babel-plugin-transform-remove-console --save-dev

使用:babel.config.js

// 项目在发布时需要用到的babel插件数组
const proPlugins = [];
// 如果当前是生产环境,则使用去掉console的插件
if (process.env.NODE_ENV === 'production') {
  proPlugins.push('transform-remove-console');
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ...proPlugins
  ]
}

2.React

在config/webpack.config.js,搜索 optimization,如下。
image.png{{{width=“100px” height=“auto”}}}

修改保存即可。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以的。在 Vue 实例中,我们通常会将响应式数据定义在 `data` 选项中,然后使用 `this` 关键字来访问这些数据。但是,如果你想要在 Vue 实例之外定义响应式数据,你也可以使用 `Object.defineProperty` 来实现。 假设你有一个 JavaScript 对象,你想将其中的某个属性定义为响应式数据,那么你可以使用如下代码: ``` const obj = { name: 'Vue' } Object.defineProperty(obj, 'name', { get() { console.log('获取name属性') return this._name }, set(val) { console.log('设置name属性为:' + val) this._name = val } }) ``` 在上面的代码中,我们首先定义了一个普通的 JavaScript 对象 `obj`,其中包含了一个属性 `name`。然后,我们使用 `Object.defineProperty` 方法将属性 `name` 转换为响应式数据。在属性描述符中,我们定义了 `get` 和 `set` 方法,用于获取和设置属性的值。其中,`get` 方法会在访问属性值时被调用,`set` 方法会在设置属性值时被调用。我们在 `get` 和 `set` 方法中分别添加了一些打印语句,以便于我们观察属性的变化。 需要注意的是,我们在 `get` 和 `set` 方法中使用了 `_name` 属性来保存实际的属性值。这是因为在 `get` 和 `set` 方法中不能直接访问属性本身,否则会导致死循环。因此,我们需要将实际的属性值保存在一个不同的属性中。 最后,我们可以通过以下代码来访问这个响应式数据: ``` console.log(obj.name) // 获取name属性 obj.name = 'React' // 设置name属性为:React console.log(obj.name) // 获取name属性 ``` 这里我们首先访问了属性 `name`,这会触发 `get` 方法的调用,打印出一条日志,并返回属性值 `'Vue'`。然后,我们将属性 `name` 的值修改为 `'React'`,这会触发 `set` 方法的调用,打印出一条日志,并将属性的实际值 `_name` 修改为 `'React'`。最后,我们再次访问属性 `name`,这会再次触发 `get` 方法的调用,打印出一条日志,并返回新的属性值 `'React'`。 希望这个例子能够帮助你理解如何在 Vue 实例之外使用 `Object.defineProperty` 定义响应式数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值