Open hubaobao1223 opened 4 years ago
试了一下,发现了几个问题, 1.className的正则表达式应该兼容单引号,否则习惯用单引号的项目识别不到className中的类名 2.pkgName无法根据组件生成不同的hash值,试了一下所有类名增加的hash后缀都是一样的,找了一下原因 const computeHash = (pkgName) => { if (computedHash[pkgName]) { return computedHash[pkgName] } const hash = md5(pkgName).substr(0, 8); computedHash[pkgName] = hash; return hash; } const cwd = process.cwd(); const pkgName = require(path.join(cwd, 'package.json')).name; const hash = computeHash(pkgName); 这段代码中生成的pkgName始终都是package.json中的name,这个是固定的,所以hash值也是固定的,如果每个样式名加的hash值固定,并不能达到组件样式隔离的效果 3.发现覆盖子组件的样式还是有问题 .PushModule .project-1fece0cb .PushModule-1fece0cb .project 在css文件中同时出现了以上两种情况,但是其实dom中引用的是PushModule-1fece0cb和project-1fece0cb,所以project部分的样式没有被引用到
第一个问题我目前已经发现了,代码还没有发布更新到github和npm 第二个问题其实是这个loader的使用定位问题,它并不是要在一个完整的应用工程中使用,而是在单个组件的工程构建中使用,核心的应用场景是前端组件化研发的情况下,每个组件作为一个单独的项目工程在发布的时候可以自动为这个组件的类名和样式添加hash,这样当其他应用引入和使用这个组件的时候,不同的组件之间样式就是隔离的 第三个问题是指组件嵌套使用的场景吗?
试了一下,发现了几个问题, 1.className的正则表达式应该兼容单引号,否则习惯用单引号的项目识别不到className中的类名 2.pkgName无法根据组件生成不同的hash值,试了一下所有类名增加的hash后缀都是一样的,找了一下原因 const computeHash = (pkgName) => { if (computedHash[pkgName]) { return computedHash[pkgName] } const hash = md5(pkgName).substr(0, 8); computedHash[pkgName] = hash; return hash; } const cwd = process.cwd(); const pkgName = require(path.join(cwd, 'package.json')).name; const hash = computeHash(pkgName); 这段代码中生成的pkgName始终都是package.json中的name,这个是固定的,所以hash值也是固定的,如果每个样式名加的hash值固定,并不能达到组件样式隔离的效果 3.发现覆盖子组件的样式还是有问题 .PushModule .project-1fece0cb .PushModule-1fece0cb .project 在css文件中同时出现了以上两种情况,但是其实dom中引用的是PushModule-1fece0cb和project-1fece0cb,所以project部分的样式没有被引用到