深度解析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-12-04 10:46:26

    nuxt.js项目中全局捕获异常并生成错误日志全过程

     需求:客户在使用过程中页面报错时,可以生成错误记录传回服务器,以便改进。   步骤:     一.全局捕获异常,     二.发送到服务端,     三.生成错误日志。   一.全局捕获异常 如图,vue提供了errorHandle这个方法来处理全局异常,更多详细内容参见官网。

  • 2019-12-04 10:47:59

    nuxt.js项目中全局捕获异常并生成错误日志全过程

     需求:客户在使用过程中页面报错时,可以生成错误记录传回服务器,以便改进。   步骤:     一.全局捕获异常,     二.发送到服务端,     三.生成错误日志。   一.全局捕获异常 如图,vue提供了errorHandle这个方法来处理全局异常,更多详细内容参见官网。

  • 2019-12-04 10:48:18

    vue 项目资源文件 static 和 assets 不说区别直接使用?

    assets中资源会webpack构建压缩到你代码中,而static文件直接引用。 static 中长存放类包、插件等第三方的文件,assets里放属资源文件比如自己资源图片、css文件、js文件。 引入资源的方式static文件夹可以使用~/static/方式引入, assets文件夹可以使用 ~@/assets 方式引入

  • 2019-12-05 17:01:36

    Vue 结合 Axios 接口超时统一处理

    当网路慢的时候。又或者公司服务器不在内地的时候,接口数据请求不回来超时报错的情况相信大家肯定遇到过的,这里我把我公司项目请求超时的处理方法分享下,希望看过后有帮助。

  • 2019-12-05 17:13:40

    JS模板工具lodash.template的简单用法

    lodash是从underscore分支的一个项目,之前我写了一篇JS模板工具underscore.template的简单用法,lodash跟underscore很相似,这也简单介绍一下lodash的template方法。 先把underscore的文章中用过的代码贴过来,把underscore的js文件换成lodash的js,其他一字不改,然后我们试试: