4.Node.js 使用 Babel 搭建ES6开发环境

简介: 4.Node.js 使用 Babel 搭建ES6开发环境

最终结果


image.png


新建package.json

{
  "name": "Worktile Pro IM",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "run": "babel-node app.js",
    "build": "babel . -d .dist --ignore=\"node_modules\""
  },
  "devDependencies": {
    "babel-cli": "*",
    "babel-core": "*",
    "babel-preset-es2015-node5": "*",
    "babel-preset-stage-3": "*",
    "babel-register": "*"
  }
}

安装依赖

cnpm install --save

配置 .babelrc

{
  "presets": ["es2015-node5", "stage-3"],
  "plugins": []
}

配置入口文件bin.js

// bin.js
require('babel-polyfill');
require('babel-register');
require('./main.js'); // 这个地方引入您的项目的启动文件

试一下ES6的模块导出导入功能

lib.js

export const name = 'calc';
export const add = (x, y) => {
    return x + y;
};

main.js

import * as calc from './lib';
const x = 3;
const y = 5;
console.log(`${calc.name}`);
const result_add = calc.add(x, y);
console.log(`${x} + ${y} = ${result_add}`);

运行

$ node bin.js

输出

calc
3 + 5 = 8


目录
相关文章
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
3月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
1月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
29 5
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
54 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
1月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
28 3
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
61 4
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
35 1
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
49 0
|
2月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
27 1
|
3月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
47 9