深度解析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-08-03 21:16:46

    Node.js 里面那些遗失的 ES6 特性

    其实 Node.js 对 ES6 的很多特性都已经开始支持了。 在 Node.js 使用的 JS 引擎 V8 里面将不同状态 ES6 特性分成了 3 个等级:

  • 2017-08-08 11:17:17

    nginx 反向代理 取得真实IP和域名

    nginx反向代理后,在应用中取得的ip都是反向代理服务器的ip,取得的域名也是反向代理配置的url的域名,解决该问题,需要在nginx反向代理配置中添加一些配置信息,目的将客户端的真实ip和域名传递到应用程序中。

  • 2017-08-09 15:14:52

    如何写好.babelrc?Babel的presets和plugins配置解析

    官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器。 作为前端开发,由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年。Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。

  • 2017-08-15 17:44:21

    glob 介绍

    glob 最早是出现在类Unix系统的命令行中, 是用来匹配文件路径的。比如,lib/**/*.js 匹配 lib 目录下所有的 js 文件。 除了在命令行中,我们在程序中也会有匹配文件路径的需求。于是,很多编程语言有了对 glob 的实现 ,如 Python 中的 glob 模块; php 中的 glob 方法。

  • 2017-08-16 08:45:41

    nodejs中流(stream)的理解

    这种方式是把文件内容全部读入内存,然后再写入文件,对于小型的文本文件,这没有多大问题,比如grunt-file-copy就是这样实现的。但是对于体积较大的二进制文件,比如音频、视频文件,动辄几个GB大小,如果使用这种方法,很容易使内存“爆仓”。理想的方法应该是读一部分,写一部分,不管文件有多大,只要时间允许,总会处理完成,这里就需要用到流的概念。