Skip to content
This repository has been archived by the owner on Jul 27, 2021. It is now read-only.

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

Open
SweetsXob opened this issue Jan 8, 2020 · 7 comments
Open

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

SweetsXob opened this issue Jan 8, 2020 · 7 comments

Comments

@SweetsXob
Copy link

SweetsXob commented Jan 8, 2020

因为是用ES6开发,参考这个回复#83 (comment)

使用如下方式引入
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'
@baijunjie
Copy link
Owner

baijunjie commented Jan 14, 2020

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

@SweetsXob
Copy link
Author

SweetsXob commented Jan 15, 2020

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

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

@baijunjie
Copy link
Owner

@SweetsXob 据我所知,似乎

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

"module": "src/index.js"

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

@SweetsXob
Copy link
Author

理论上,作为一个第三方库,导出的文件,应该是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
Copy link
Author

SweetsXob commented Jan 15, 2020

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

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

@baijunjie
Copy link
Owner

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

@SweetsXob
Copy link
Author

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants