深度解析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的理解,这一篇问文章就够了

  • 2017-04-16 21:02:55

    ImageView的android:adjustViewBounds属性

    取值为true时: Adjust the ImageView's bounds to preserve the aspect ration of its drawable. 调整ImageView的界限来保持图像纵横比不变。 这并不意味着ImageView的纵横比就一定和图像的纵横比相同

  • 2017-04-18 17:12:50

    Laravel 读取 config 下的数据

    Laravel的config下一般存放配置信息,可以通过config('key')方法获取指定的数据。 设置值可通过「点」式语法读取,其中包含要访问的文件名以及选项名称。

  • 2017-04-26 16:43:03

    php对象和数组相互转换的方法

    这篇文章主要介绍了php对象和数组相互转换的方法,通过两个自定义函数实现对象与数组的相互转换功能,非常简单实用,需要的朋友可以参考下

  • 2017-04-26 22:59:15

    百度编辑器Ueditor的黑白名单过滤

    黑白名单配置。UEditor针对进入编辑器的富文本内容提供了节点级别的过滤,可以通过该配置的修改来达到控制富文本内容的目的

  • 2017-04-26 23:30:58

    PHP中session变量的销毁

    本篇文章主要是对PHP中session变量的销毁进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

  • 2017-05-02 17:51:44

    php生成不重复随机字符串

    使用时间戳作为原始字符串,再随机生成五个字符随机插入任意位置,生成新的字符串,保证不重复