es6 转es5_es5 es6是什么

es6 转es5_es5 es6是什么项目js没有用vue的福音情景问题 项目有很多新的js语法es6es7等等 如你所愿市面上很多浏览器已经大部分支持这些与语法了 但是ie就差强人意了直接歇菜如何解决 利用node插件完成语法降级实施情景 #安装babel npminstall–save-dev@babel/core #安装转码规则 npminstall–save-dev@babel/preset-env #规则加入babel.config.json

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

情景问题


	项目有很多新的 js 语法 es6 es7 等等
	如你所愿市面上很多浏览器已经大部分支持这些与语法了
	但是 ie 就差强人意了 直接歇菜

如何解决


	利用 node 插件完成语法降级

实施情景


	# 安装babel
	npm install --save-dev @babel/core
	# 安装转码规则
	npm install --save-dev @babel/preset-env
	# 规则加入 babel.config.json
	{ 
   
	    "presets": [
	        [
	            "@babel/preset-env", 
	            { 
   
	            "corejs": "2",
	            "useBuiltIns": "usage" // 按需加载:usage 表示明确使用到的 Polyfill 引用。在一些 ES2015+ 语法不支持的环境下,每个需要用到 Polyfill 的引用时,会自动加上
	            },
	
	        ]
	    ]
	}
	# 命令行转码
	npm install --save-dev @babel/cli               
	# babellify 这个是 babel 为 browserify 提供的 配合 browserify 转换 exports 和 require 语法 使ie支持 二合一 直接一步转换
	npm install -g browserify
	npm install --save-dev babelify @babel/core
	npm install core-js@2 --save-dev
	#用法npx browserify script.js -t babelify -o bundle.js
	# 安装 uglifyjs压缩代码
	npm install uglify-js --save-dev
	mkdir -p /usr/local/node 
	cd /usr/local/node
	# 安装node
	wget https://nodejs.org/download/release/v14.6.0/node-v14.6.0-linux-x64.tar.gz
	# 解压
	tar -zxvf node-v14.6.0-linux-x64.tar.gz
	# 重命名
	mv node-v14.6.0-linux-x64 node14
	# node环境变量
	PATH=$PATH:/usr/local/node/node14/bin
	# 复制js文件到当前目录
	\cp /root/my-project/src/main/resources/static/js -r ./
	# 执行转换命令
	find js/business/ -name '*.js' -type f -exec npx browserify { 
   } -t babelify -o lib/{ 
   } \;
	# 执行压缩命令
	find lib/js/business -name '*.js' -type f -exec npx uglifyjs { 
   } -m -c -o { 
   }.mini.js \;
	# 把处理好的js复制到源项目下
	\cp -r lib/js/business /root/my-project/src/main/resources/static/js

packson.json


{ 
   
	"name": "es6-es5",
	"version": "1.0.0",
	"description": "es6 transform es5",
	"main": "index.js",
	"scripts": { 
   
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "npx browserify parent.js -t babelify -o parent.bundle.js"
	},
	"author": "aming",
	"license": "ISC",
	"devDependencies": { 
   
		"@babel/cli": "^7.17.6",
		"@babel/core": "^7.17.8",
		"@babel/preset-env": "^7.16.11",
		"babelify": "^10.0.0",
		"browserify": "^17.0.0",
		"core-js": "^2.6.12",
		"uglify-js": "^3.15.3"
	},
	"dependencies": { 
   
		"npx": "^10.2.2"
	}
}

项目脚本


#! /bin/bash
JS_PATH=src/main/resources/static/js/business/
echo '[starting...] transform path is: '$JS_PATH
echo '[starting install node]'
npm i
npm audit fix
echo '[starting babelify]'
find $JS_PATH -name '*.js'  -not -name 'productadd.js' -type f -exec npx browserify { 
   } -t babelify -o { 
   } \;
echo '[starting uglifyjs]'
find $JS_PATH -name '*.js'  -not -name 'productadd.js' -type f -exec npx uglifyjs { 
   } -m -c -o { 
   }.mini.js \;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189697.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 报表开发-列表参数

    1.目的:做一个下图的筛选框-实现多选(这是在已有报表基础上加一个筛选框,如果从无到有,步骤略有不同)(点击前)(点击时)2.首先配置数据源制作报表,点击报表中任意一个指标,在左上角出现数据源3.从组件中拖一个列表参数过来4.拖过来是这样子的,右键,录入数据5.录入固定数据,绑定数据源(记得按“应用”和“确定”)添加完就下面这样了6….

  • 兼容,原来在这里就已经開始——–Day34

    兼容,原来在这里就已经開始——–Day34

  • Redis入门_redis菜鸟教程

    Redis入门_redis菜鸟教程Redis文章目录Redis一、Redis概述二、Redis应用场景三、Redis的下载和安装四、Redis服务的启动五、Redis命令行工具六、Redis基础知识七、Redis数据类型1.key(键)2.String(字符串)3.List(列表)4.Set(集合)5.Zset(有序集合)6.Hash(哈希)八、实践案例九、Redis常用查询指令十、Jedis的使用十一、Redis可视化工具十二、持久化概念十三、RDB十四、AOF十五、AOF重写十六、RDB与AOF的选择一、Re

  • layui实现iframe框架_layui table重新渲染

    layui实现iframe框架_layui table重新渲染layuiAdmin.std(iframe版)是完全基于layui架构而成的通用型后台管理模板系统,采用传统的iframe多页面开发模式,可更快速直接地开发网页后台应用程序,无需过多地学习成本,简单高效,撸起袖子直接干。题外该文档适用于layuiAdmin.std常规版(iframe),阅读之前请务必确认是否与你使用的版本对应。熟练掌握layuiAdmin的前提是熟练…

    2022年10月28日
  • R语言软件安装教程「建议收藏」

    R语言软件安装教程「建议收藏」安装R和Rstuido软件R语言是用于统计分析,图形表示和报告的编程语言和软件环境;Rstudio是编辑、运行R语言的最为理想的工具之一。1、官网下载R安装包下载地址为:https://cran.r-project.org进入链接,如下图所示,在页面顶部提供了三个下载链接,分别对应三种操作系统:Windows、Mac和Linux。请选择自己操作系统对应的链接,接下来我将以windows为例给大家展示安装过程。接下来单击【DownloadRforWindows】——>【base】—

  • MFC进度条同步问题

    MFC进度条同步问题读者朋友们可能天天使用Visual C++这个强大的工具来开发应用程序,不知道注意到没有,Visual C++每次装载一个项目的时候,为了使项目加载过程不至于太单调,会在状态栏的左半部分会出现一个装载进度条,用来即时显示Visual C++装载项目的进度,当项目装载完毕后,进度条隐藏。那么这个功能是如何实现的呢?为了说明该功能的实现原理,本例提供了一个范例程序prgsbar,它演示了在编辑视图里显

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号