vue源码技术点(第一天)

最新推荐文章于 2025-01-15 18:14:07 发布

shao.zq

最新推荐文章于 2025-01-15 18:14:07 发布

阅读量305

点赞数

本文链接：https://blog.youkuaiyun.com/qq_23370345/article/details/103955875

版权

本文深入解析了Object.keys与map函数在处理配置对象中的作用，通过实例展示了如何利用这些方法来遍历并操作配置项，特别关注于在构建系统如webpack中的环境变量设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 exports.getAllBuilds = () => Object.keys(builds).map(genConfig)

函数Object.keys
会返回一个对象中所有可枚举的key，如果是数组，将会返回下标。

例如：
1.const configs = {
  umdDev: {
    format: 'umd',
    env: 'development'
  },
  umdProd: {
    format: 'umd',
    env: 'production'
  }
}
console.log(Object.keys(configs));//["umdDev","umdProd"]
2.const test=["11","22","33"]
console.log(Object.keys(test));//["0","1","2"]

map函数
方法会返回一个数组，该方法的参数为currentValue, index,arr,.
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
process.env.TARGET
process对象
- node.js中进程相关的对象
- 是全局对象，因此你可以在code中的任何一个地方访问其对象中的属性，值都是一致的
- 其中包含一些和进程以及nodejs运行环境相关的一些属性
在webpack中可以采用如下方式设置env对象。

windows：
 "serve": "set TARGET=这就是测试 && vue-cli-service serve ",
 mac：
  "serve": "export TARGET=测试 &&  vue-cli-service serve ",
因为为平台不一样所以增加开发困难所以可以引用cross-env（跨平台设置第三方变量包）
  "serve": "cross-env TARGET=测试  vue-cli-service serve",

process.argv[2]

process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径		 process.argv[1]——为当前执行的JavaScript文件路径
process.argv[2]——其他命令行参数
例如：
输入命令：node scripts/build.js "web-runtime-cjs,web-server-renderer"
  结果：
	console.log(process.argv[0])   // 打印 D:\nodeJs\node.exe
	console.log(process.argv[1])   // 打印 E:\Study_document\vue-resource\vue-dev\scripts\build.js
	console.log(process.argv[2])   // 打印 web-runtime-cjs,web-server-renderer