PhotoClip.js icon indicating copy to clipboard operation
PhotoClip.js copied to clipboard

大小写修改,导致的错误,和一些小小建议

Open SweetsXob opened this issue 4 years ago • 7 comments

因为是用ES6开发,参考这个回复https://github.com/baijunjie/PhotoClip.js/issues/83#issuecomment-411647796

使用如下方式引入
import PhotoClip from 'photoclip/dist/PhotoClip.js'

但是,最近发现photoclip/dist/PhotoClip.js文件,已经改成了Photoclip.js小写(v3.4.7) 但是文件里,还使用的大写。然后线上jenkins打包,报错了 (本地windows不区分大小写,线上linux区分大小写)

上面是文件大小写引发的问题,下面是一些我的想法

一般情况下,按常理都会直接这样引用

import PhotoClip from 'photoclip'

额,然后呢,在项目里,排除exclude: /node_modules/

package.json
  "main": "dist/PhotoClip.js",
  "module": "src/index.js",

所以module: src/index.js文件,就不会经过babel编译

所以,感觉是不是可以将module也指向"dist/PhotoClip.js",如下

package.json
  "main": "dist/PhotoClip.js",
  "module": "dist/PhotoClip.js",

或者再多打一个,符合es导出规范的es5语法包,类似于这样

package.json
  "main": "dist/PhotoClip.js",
  "module": "dist/PhotoClip.es.js",

这样,就可以毫无忌惮的使用,这样子导入了

import PhotoClip from 'photoclip'

SweetsXob avatar Jan 08 '20 03:01 SweetsXob

感谢提示! 文件名应该为 PhotoClip.js 稍后我会修正。 package.json 中的 module 属性在某些情况下使用 webpack 时会引起编译结果不符合预期,我准备将它移除

baijunjie avatar Jan 14 '20 09:01 baijunjie

package.json 中的 module 属性,可以用来指向 符合ES导出规范的文件 所以,是不是可以考虑,多打一个包【PhotoClip.es.js】,将module属性,指向这个文件,比如:

"module": "dist/PhotoClip.es.js"

SweetsXob avatar Jan 15 '20 02:01 SweetsXob

@SweetsXob 据我所知,似乎

"module": "dist/PhotoClip.es.js"

"module": "src/index.js"

并没有区别,同样是使用 ES6 语法的文件

baijunjie avatar Jan 15 '20 03:01 baijunjie

理论上,作为一个第三方库,导出的文件,应该是ES5语法的文件 也就是说,package.json字段main,module指向的文件,都应该是ES5语法的文件

webpack可以识别两种导出模式

node导出模式
module.export = xxx
和
ES导出模式
export default xxx
export xxx

package.json中的main字段和module字段,正好对应2种导出方式

main 对应 module.export 方式
module 对应 export 方式

export导出,有很多优点,比如方便webpack做静态分析,做代码移除等 所以,可以考虑打包一个符合ES导出规范的ES5语法的文件

SweetsXob avatar Jan 15 '20 08:01 SweetsXob

最开始,出错的根源,就是因为module指向了一个ES6语法的文件,webpack默认去读取这个文件 但是node_modules文件夹,又被排除了。所以这个文件并不会被转换成ES5语法,才造成了报错的情况

然后通过手动引入ES5语法的文件,“photoclip/dist/PhotoClip.min.js”,才解决这个问题 所以,希望module指向的文件,也是ES5语法的文件

SweetsXob avatar Jan 15 '20 09:01 SweetsXob

@SweetsXob 了解了,不过我暂时选择直接移除 module,先解决目前的问题。

baijunjie avatar Jan 16 '20 10:01 baijunjie

嗯嗯。这样也好,后面就不会报错了。 之后再考虑优化的事情。 赞个!!!

SweetsXob avatar Jan 17 '20 02:01 SweetsXob