为啥要用es6?
因为这肯定是趋势, 外加个人喜好, 更重要的一点是我不太懂es5的exports
目标
- 用es6语法写node代码, 并且最终能够正确被node工具执行
实现
全局安装babel-cli
npm install babel-cli -g
babel的作用就是将新版本的 ECScript语法, 转换为旧版本的ECScript语法, 从而让我们达到, 用es6写代码, 再通过babel转换es6语法的代码为es5的语法代码, 最后让node命令运行es5的代码
我们主要是需要babel-cli中的如下两个命令
babel: 根据.babelrc配置文件,将源代码的js语法转换为目标版本的js代码
babel-node: 提供一个支持ES6的REPL环境，支持Node的REPL环境的所有功能，可以直接运行ES6代码(相当于一个支持es6语法的node命令)
编写代码测试
创建一个空的node项目
mkdir es6-node-project
cd es6-node-project
mkdir target
mkdir src
pnpm init -y
安装依赖
pnpm i babel-cli -g
pnpm i babel-preset-es2015 -D
新建代码文件
src/sub.js
export function test(name){
console.log(`你好:${name}`)
}
src/hello.js
import {test} from './sub'
const hello = 'hello world'
console.log(hello)
test('李四')
执行编写好的代码
运行如下命令肯定会出现如下错误
node ./src/hello.js
提示语法错误, 原因是node无法识别es6的 import ... from 'xxx', export xxx 语法
那么先来检查下node对es6的支持情况
npm i es-checker -g
es-checker
红色部分表示当前机器上的node版本, 尚未支持的es6语法, 其中有 import, export, 因此刚刚执行node ./hello.js是会报错的
那怎么才不会报错呢, 没错, 就是用babel-node命令代替node命令
babel-node ./src/hello.js
一执行,还是会出现类似如下的错误, 这啥情况?
出现如上的错误, 是因为babel-node实际也是将原始的代码转换为es5的代码, 但是怎么转换需要你通过配置文件来告诉babel
新建.babelrc文件
{
"presets": [
"es2015"
],
"plugins": []
}
再次执行
babel-node ./src/hello.js
此时就可以得到如下结果
现在的情况用于本地开发是没问题了, 但你总不能要求其他人的电脑也和你本地开发一样, 安装一堆的依赖吧, 因此我们需要使用babel命令,将所有的源代码,全部转为es5的代码
转一个文件 这只能用于谢谢测试之类的
babel ./src/hello.js -o ./target/hello.js
转换整个项目
babel src -d target
最后再用node命令执行target下的js文件, 依然能够得到预期的结果
node ./target/hello.js
