Babel编辑ES6代码

Posted 413xiaol

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Babel编辑ES6代码相关的知识,希望对你有一定的参考价值。

1.安装babel依赖

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

  

2.用node初始化一个项目

node init -y

  

初始化后的package.json长这样

  "name": "learn2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC"

  

在package.json中增加scripts命令

  "name": "learn2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d dest"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC"

  

3.配置 babel.config.js

const presets = [
	[
		"@babel/env",
		
			targets: 
				edge: "9",
				firefox: "60",
				chrome: "67",
				safari: "11.1",
			,
			useBuiltIns: "usage",
		,
	],
];

module.exports =  presets ;

  

4.运行

npm run build

  

以上是关于Babel编辑ES6代码的主要内容,如果未能解决你的问题,请参考以下文章

NPM:在node_modules目录中编辑es6编写的插件而不进行转换

经过webpack和babel打包过的前端代码可以还原最初的html+css+js吗?

babel实践

09-babel

Babel 入门

Babel 入门