让nodejs支持es6扩展语法

一、用HBuilderx开发后台管理项目时，用到了es6的拓展（...）语法，然后编译一直报错，不支持。

安装es-checker

$ npm install -g es-checker

$ es-checker

检测发现是支持该语法的。

百度后找到的解决方案

1、引入babel依赖

npm install babel-plugin-transform-object-rest-spread
npm install babel-preset-es2015 --save-dev

2、在vue项目的src/.babelrc文件中（没有自己创建）下修改

{
"presets":[["es2015",{"modules":false}]],//依赖ES5模块转换
"plugins":["transform-object-rest-spread"]
}

 

二、又报不支持scss文件，需要安装node-sass

于是又安装

$ npm install node-sass

然后又报checking if "python" can be used 应该是没有装python

于是又装了对应版本的python（https://registry.npmmirror.com/binary.html?path=python/3.7.0/）

 

三、双报“Node Sass version 7.0.1 is incompatible with ^4.0.0“

然后发现第二步白做了，找到的解决方案

npm uninstall node-sass
npm i -D sass
npm run start

 

 四、叒报错：TypeError: this.getResolve is not a function

原因：安装的sass-loader的版本为最新8.0.0，查看网上资料说是版本过高导致编译错误。

解决方法：

把项目package.json文件中sass-loader版本改为7.3.1。执行命令，重新安装项目依赖

 五、 报Unexpected character '#'

在webpack.config.js将

{
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }

改为

{
        test: /\.css$|\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }

 

至此终于可以了，在此记录一下。