深度解析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-09-23 16:17:13

    consola 教程

    consola 和 console 只差一个字母,并且它们都是控制器日志输出的好帮手。console 在某些方面,使用有些局限性。consola 是一个功能更丰富,更漂亮的控制台日志输出控件。今天我们一起来学习它的

  • 2019-09-24 22:03:13

    nginx支持socket

    安装nginx,stream模块默认不安装的,需要手动添加参数:–with-stream,根据自己系统版本选择nginx1.9或以上版本。

  • 2019-09-26 13:25:38

    git合并时冲突<<<<<<< HEAD

    head 到 =======里面的lalala是自己的commit的内容 =========到 >>>>>>里面的hehehe是下拉的内容

  • 2019-09-26 18:57:29

    Java中数组怎么深度复制

    有时候循环进行一些操作,放入list,发现,list中的数据都是一个数据,这就尴尬了,我们需要深度复制,才能解决这个问题。或者生成新的,也就是深度复制。

  • 2019-09-26 19:03:33

    spring post jackson的反序列化需要无参构造函数

    JSON parse error: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator)  at [Source: (PushbackInputStream); line: 2, column: 2]] ———————————————— 版权声明:本文为CSDN博主「冰夏之夜影」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/u011561335/article/details/91346777