深度解析npm包import报错的问题,对比import、require、export、module.exports的区别

2020-04-15 17:03:34

自己用import的方式写了一个npm包,在本地跑的好好的,发布以后引用去出现了问题。报错信息入下

不同的工程报错信息不怎么一样

  1.  SyntaxError Unexpected identifier

  2. SyntaxError Cannot use import statement outside a module


可痛苦死了,怎么也找不到原因。后来深度学习了commonJS 和 ES6 等引入包的机制,以及babel的编译原理,终于恍然大悟。

也不费我这么多日子的辛苦解决。


第一,nodejs至今仍然不支持ES6标准的import引用,所以发布的npm包不能直接用import,即使你是用import写的,最后发布的时候也要转成commonjs规范的代码,一个模块只发布的源码没有发布commonjs规范的代码,直接怼作者就行了。

        具体参考知乎回答,在webpack中配置babel-loader时,为什么要排除node_modules这个文件夹呢?

第二,在本地可以,发布成包就不可以了,原因也是这个问题,因为我们本地已经配置了babel,然后可能最新的babel排除了node_modules文件夹,这样就导致了我们打包的时候出现了报错,不支持import。

        commonJs和import的运行机制,参考 import和require如何在项目中混用 


  所以对与我们上面出现的问题,有两种解决办法,第一,使用你这个npm包的要配置好babel,第二,就是你转换成commonjs规范的代码,我更推荐后者,我更喜欢直接用commonJS来写npm包,这样便于直接使用中修改,这样至少利于npm包的开发者,前期好找问题和修改。


      commonJS 是运行是加载,就如缓存是的

    import 是静态接卸,就如单例是的

    关于ES6 import的讲解,下面这一篇文章就够了,真没想到以个小小的import竟然能有这么多变种。

export和import的理解,这一篇问文章就够了

  • 2019-06-23 09:22:33

    Android 拍摄(横\竖屏)视频的懒人之路

    一般用在多媒体录制上面,当然如果你只是简单的想录制音频,用它最合适不过,不过如果你想更多样化的录制这里推荐《Android MP3录制,波形显示,音频权限兼容与播放》。今天的主题是录制视频,用的还是老式通用的Camera,不是新的camera2(这就尴尬了.....((/- -)/),反正个人秉承能用是王道的做法(懒)。之前也尝试过FFMPEG的录制合成音频,大小和效果也不错,只是有时候的兼容性确实有些问题,最主要还是资料不多,不好改啊 ̄へ ̄(懒)。

  • 2019-06-23 09:24:59

    仿抖音系列

    最近公司在做个短视频的项目,其中借鉴了很多抖音的设计,其中就有抖音的上下滑切换视频。

  • 2019-06-24 06:22:10

    Android RecyclerView嵌套的滑动冲突问题

    这是一个简单的recyclerView嵌套recyclerView的demo, 很明显,子布局应该也是可以滑动的才对,但你滑动子布局却是父布局在滑动 这就是滑动冲突