×

关于在nodejs里使用ES6模块后引出的一系列“奇案”

作者:Terry2021.05.19来源:Web前端之家浏览:5465评论:0
关键词:nodejsgulpes6

500.jpg

最近在研究一款基于nodejs的CMS,后台使用nodejs搭建的,前台可以原生HTML,或者使用vuejs,react,构建工具使用webpack&gulp&sass。

基于nodejs的CMS,要比市场上那些PHP,JAVA等后台要轻便得多,即可以节约服务器成本,维护起来也方便,所以值得大家去探讨和研究。今天分享不是CMS,而是我部署的时候一些坑。

问题来源

基于nodejs的CMS已经安装完毕,是没问题的。但是我使用的内置的构建工具gulp进行压缩CSS,JS或者image的时候,问题就来了,可以先看张图:

1.jpg

一直提示:ES模块不支持。其实如果您不了解nodejs下面对于ES模块的兼容问题的话,估计这问题会坑死你。你可以按照他的提示去处理,比如去掉type:module,或者把.js改成.cjs,然后继续运行。

并且尝试用require改成es6里的import和export,发现新的错误又来了。

2.jpg

文字错误:提示你不能import外面的module,所以此方法行不通哦。于是我找了些资料,如何让ES6在node下面运行。于是找到此方法:

nodejs不支持import语法,如果要支持,需要babel来支持。

所以我们来安装babel吧, 有了babel, 能够使用更多高级词法!

在项目根目录下,执行:

npm install --save babel-corenpm 
install --save babel-preset-env 或者 npm install --save babel-preset-es2015npm 
install babel-cli -g

接着在项目根目录下创建一个名字为.babelrc的文件, 文件内容入如下( 要注意window系统下创建这种文件系统会提示你:“必须键入文件名” , 你可以找别的方式去创建, 我是在开发工具的工程目录中把这个文件创建出来的,也可以用cmder神器的vim命令):

{
    "presets": [
      "es2015"
    ],
    "plugins": []
}

或者:

{                
    "presets": [ 
         "env"   
     ],          
    "plugins": []
}

到目前为止babel算是安装完毕了。开心了,应该没问题了吧,于是尝试运行,没啥用哦,还是同样的报错。

插件版本问题

有时候版本问题会直接影响程序的运行,所以大家必须牢记。

继续回到上面提到的问题,查看了安装的一些插件,进行了一系列的更新,然而事与愿违,还是行不通。

CMS主题脱离NODE

几个小时过去了,上面的方法我都尝试了,发现还是解决不了。于是我把基于CMS的主题模板复制到外面去,单独去建一个项目,然后使用gulp去构建合并压缩,发现还是同样的问题,此时此刻,心态已到奔溃边缘了。

出去喝杯茶调整下,看来只有使用最后的绝招,先新建一个空壳的框架,然后把主题模板的插件和代码一个个移动进去,进行对比,结果真被我找到了。祸根就是gulpfiles里面这个插件模块:

const beeper = require('beeper');

我把它注释掉了,就可以解决上图1和图2的问题了。

但是在运行过程中又出问题了:

[object Object] is not a PostCSS plugin

gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143
        throw new Error(i + ' is not a PostCSS plugin');
        ^Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15)
    at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25)
    at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10)
    at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:300:12)
    at writeOrBuffer (_stream_writable.js:286:5)
    at Transform.Writable.write (_stream_writable.js:214:11)
    at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
Mac-a45e60e72dad:gulp JoeKonst$

爬坑之路还未完成,继续查找,此时此刻,我去谷歌搜索了,结果在stackoverflow上面找到了解决方案。

提示我更新了插件的postCSS版本,然后最最最重要一步就是执行命令:

npm i -d postcss

使得它跟系统其他插件相关联起来了。于是继续运行下程序,如下图所示:

3.jpg

看到上图,大功告成,终于松了口气,折腾一下午的时间没有白费。

解决方案总结

总结爬坑之路,问题主要根源是:beeper模块和postCSS关联,我们是注释了beeper模块,也就是说在框架里,我们不能使用它了,所以此方法或者有些不妥,但是对于现状来说,还是可以的。

如果我们在以后更大的项目里,应该采取更稳妥的方法去解决,也就是要让node下面去兼容ES6模块,这里我归纳了一种方案,供大家参考。以实例说明,请往下看。

在编写nodejs代码中想要引进我的一个工具函数包 utils.js 。里面的代码结构如下:

 //utils.js
 
export const funA = () => {} ; //函数funA 
export const funB = () => {} ; //函数funB

在其它js文件中使用ES6 import语法 import * as Utils from './utils' 中都没问题,但是在nodejs中用import,启动 node serve.js时候会报语法错误(除非用 babel-node serve.js 编译ES6)。这是由于nodejs中部分ES6语法还没有标准化,还不能直接支持(今后新版本可能会支持哦~~),需要安装 babel-cli 去支持。

解决方案

大家都知道node中通常引入模块是 require 语法,而非import语法。 那么怎么编写一个js文件 即支持require 语法,又支持import语法呢。

//utils.js

const funA = () => {} ; //函数funA 
const funB = () => {} ; //函数funB
module.exports = {
  funA:funA,
  funB:funB,
}

这样node中也可以用require 引进:

//nodejs   
//service.js

const Utils = require('./util')

启动node服务器 node serve.js 就不会报错啦。(注:service.js为nodejs的入口文件)

大家可以按照上面的方法去尝试下,如果你还有问题,可以留言或者加入QQ群咨询。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/nodejsquesiont23432432.html

网友评论文明上网理性发言 已有0人参与

发表评论: