nodejs下用es6编程babel和gulp的配合应用

已于 2022-11-15 10:27:33 修改
阅读量3.2k 收藏
点赞数
分类专栏： express nodejs vagrant 文章标签： gulp express nodejs babel6 es6
于 2017-02-05 23:09:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling369523246/article/details/54884735
版权
本文介绍了如何在Node.js环境下，结合Express框架实现一个简单的MVC项目，并利用Babel将ES6代码转换为ES5。在Node.js 6不完全支持ES6的情况下，通过配置.babelrc文件和选择stage-0预设，确保import等特性得以转换。文章还提到了手动使用babel命令转换文件的不便，建议采用Gulp进行文件监听和自动化转换，通过运行'gulp watchnode'实现动态更新，从而提升开发效率。
摘要由CSDN通过智能技术生成

每一个程序员都有一颗全栈的心，node和es6满足了尤其是前端的憧憬。

node下用express框架，实现一个简单的mvc。当然用es6编程就涉及到es6到es5的转换。即使是node6 对es6实现了百分之九十四的支持也有那么一点没有实现，比如import等，所有就需要转换，用babel

安装babel

npm install  babel-core -g
或者
npm install --save-dev babel-core

在安装

npm install --save-dev babel-preset-es2015

当然有babel-preset-es2016 但是 使用 2016是 运行babel-node  就有有错误 improt 不支持


 

还是老实的用2015

需要在目录下面被子.babelrc 文件

{
  "presets": ["es2015", "stage-0"]
}

stage-0 有 0， 1， 2， 3  。stage-0包含了后面3个


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  清风笑～
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
gulp可重用：一个强大的样板，可与带有SASS，PUG和ES6 +的Gulp 3.9一起使用，具有可重用和异步任务

				
			

			

				

					02-01
				

			

		

		

			
				
一个强大的样板，可与带有可重复使用任务的SASS，PUG和ES6 +的Gulp 3.9一起使用。  该项目在具有JS-ES6 +创新的NodeJS 6+上工作，并且代码的一部分是程序包，只需要一个即可使用:) 如何使用 1克隆此仓库2安装 使用 ...

			
		

	



                

              
                



	

		

			

				
					
让nodeJS支持ES6的词法—-babel的安装和使用方法

				
			

			

				

					01-02
				

			

		

		

			
				
要使用Babel， 我们需要nodeJS的环境和npm， 主要安装了nodeJS， npm就默认安装了 ， 现在安装nodeJS很简单了， 直接下载安装就好了；
安装es-checker
在使用Babel之前 ， 我们要先检测一下当前node对es6的支持情况， 我们使用先es-checker， 命令行下执行：
运行下面代码

npm -g install es-checker
es-checker安装完毕以后， 命令行执行：es-checker ， 如下图， 我的node环境版本是v4.4.3， 支持64%哦 ：

babel的安装
所以我们来安装babel吧， 有了babel， 能够使用更

			
		

	



                


  
              

                


	

		

			

				
					
让nodeJS支持ES6的词法----babel的安装和使用

				
			

			

				

					weixin_33922670的博客
				

				

					05-03
					
					555
					
				

			

		

		

			
				
　　要使用Babel， 我们需要nodeJS的环境和npm， 主要安装了nodeJS， npm就默认安装了 ， 现在安装nodeJS很简单了， 直接下载安装就好了；
　　安装es-checker
　　在使用Babel之前 ， 我们要先检测一下当前node对es6的支持情况， 我们使用先es-checker， 命令行下执行：

npm -g install es-checker

　　e...

			
		

	





	

		

			

				
					
ES6 (一）——ES6 简介及环境搭建

					
最新发布

				
			

			

				

					m0_62701594的博客
				

				

					08-13
					
					1414
					
				

			

		

		

			
				
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

			
		

	



		

			
		



	

		

			

				
					
Node.js中通过babel体验ES6模块化

				
			

			

				

					weixin_46711427的博客
				

				

					11-21
					
					168
					
				

			

		

		

			
				
1。npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2。npm install --save @babel/polyfill

3。项目根目录创建文件 babel.config.js

4。babel.config.js文件内容如下代码：


const presets = [
  ["@babel/env",{
    targets:{
      edge:"17",
      firefox.

			
		

	





	

		

			

				
					
node中使用babel

				
			

			

				

					u013236043的博客
				

				

					12-18
					
					218
					
				

			

		

		

			
				
1.安装node

2.npm init

3.根目录新建index.js

4. cnpm ibabel-preset-es2015 --save-dev

  cnpm ibabel-preset-stage-0 --save-dev

 cnpm ibabel-preset-stage-1 --save-dev

  cnpm i babel-preset-...

			
		

	





	

		

			

				
					
Nodejs 中通过 babel 来体验 es6 语法

				
			

			

				

					彻底拆分，一切可控！
				

				

					08-09
					
					514
					
				

			

		

		

			
				
Nodejs 中通过 babel 来体验 es6 语法
1.安装依赖：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill

2.创建 babel.config.js 文件
const presets = [
    ["@babel/env", {
        targets: {
            edge: "17",
  

			
		

	





	

		

			

				
					
详解如何在NodeJS项目中优雅的使用ES6

				
			

			

				

					01-21
				

			

		

		

			
				
NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候需要在node后面加上参数：–harmony。但是，即使如此node也还是没有支持全部的ES6特性。所以...

			
		

	





	

		

			

				
					
learningwebcode-travel-site：CSS和Dev Tools-Node.js，NPM，Gulp，BEM，PostCSS，Babel，Webpack

				
			

			

				

					02-03
				

			

		

		

			
				
learningwebcode-travel-site  LearnWebCode课程的旅行网站 学习Git，GitHub和命令行基础知识，以与其他开发人员协作并部署站点。  利用NPM和Gulp等Node.... 了解JavaScript基础知识和ES6模块模式（Babel和Webpack）。

			
		

	





	

		

			

				
					
deploiii:小型基本Node + Gulp框架，用于编译SASS和ES6脚本，并可以选择通过FTP上传到服务器

				
			

			

				

					05-19
				

			

		

		

			
				
小型基本Node + Gulp框架，用于编译SASS / LESS / STYLUS和ES6脚本，并可以选择通过FTP上传到服务器（根据Hubspot CMS的需要使用FTP，还需要实施其他实际部署工具） 入门 这些说明将为您提供在本地计算机上运行并...

			
		

	





	

		

			

				
					
Node-Babel-Gulp 随笔

				
			

			

				

					绿足 博客
				

				

					08-09
					
					668
					
				

			

		

		

			
				
Node-Babel-Gulp 随笔





一. Node（npm） 安装
    Node 下载地址： 官网http://www.nodejs.org/download/、
  （选择对应的系统版本）下载完成后，直接点击安装。
    安装完成后，npm包管理工具已随同Node一起安装。
    打开命令控制台 (运行-> cmd)， 输入node -v 查看安装的Nod

			
		

	





	

		

			

				
					
Nodejs使用Babel运行ES6模块导入导出

				
			

			

				

					Night_X的博客
				

				

					11-26
					
					424
					
				

			

		

		

			
				
文章目录文件进行npm初始化下载Babel配置`.babelrc`文件运行js
文件进行npm初始化
npm init -y
下载Babel
npm i @babel/cli @babel/core @babel/node @babel/preset-env
如果不行就试试全局下载
配置.babelrc文件
{
	"presets": [
		"@babel/preset-env"
	]
}

运行js
例如
babel-node ../a.js

...

			
		

	





	

		

			

				
					
Node.js中的Babel魔法:解锁ES6语法体验

				
			

			

				

					qq_53911056的博客
				

				

					02-15
					
					2238
					
				

			

		

		

			
				
在Node.js中通过babel体验ES6模块化，babel相关的配置；了解ES6模块化，能够默认导入导出、按需导入导出、直接导入并执行模块代码。

			
		

	





	

		

			

				
					
babel-node运行es6

				
			

			

				

					Luck_ZZ的博客
				

				

					12-14
					
					671
					
				

			

		

		

			
				
一、安装babel-node

本地安装@babel/core、@babel/node、@babel/preset-env包


npm install @babel/core @babel/node @babel/preset-env

查看安装的版本



二、.babelrc 文件配置

.babelrc 文件配置




{
  "presets": ["@babel/preset-en...

			
		

	





	

		

			

				
					
写es6，用babel-node

				
			

			

				

					Marshall001的博客
				

				

					11-02
					
					939
					
				

			

		

		

			
				
node  LTS 已经更新到v8.9.0，对es6的支持肯定更好了，node -v 一看，本地还是6.11.0, 更新之。用阮一峰老师的 es-checker 查看一下支持度=========================================
Passes 38 feature Detections
Your runtime supports 90% of ECMAScript 6

			
		

	





	

		

			

				
					
node中babel的使用

				
			

			

				

					sjpeter的专栏
				

				

					02-20
					
					5180
					
				

			

		

		

			
				
1.babel就是用来将JavaScript各种版本，转化为可以被浏览器执行的代码，例如：



为转化报错

2.安装babel需先安装babel-cli插件

cnpm install babel-cli --save

babel-cli插件是用来编译代码文件，然而只安装babel-cli，直接babel com.js,会发现com.js只会被复制一遍，并不会转换代码。还需要安装babel-...

			
		

	





	

		

			

				
					
gulp-babel

				
			

			

				

					qq_29253285的博客
				

				

					05-26
					
					322
					
				

			

		

		

			
				
http://www.cnblogs.com/whitewolf/p/4357916.html

			
		

	





	

		

			

				
					
NodeJS项目中ES6的优雅应用与Babel配置详解

				
			

			

				

					
				

			

		

		

			
				
本文将详细介绍如何在Node.js项目中优雅地利用ES6特性，以及如何通过Babel进行适配和配置。随着Node.js的更新，其支持了ES6的一些新特性，如`async/await`，但为了全面使用ES6的最新功能，如箭头函数、模板字符串、...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值