分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

Pycharm ?WebStorm 配置 babel 实现自动编译 ECMAScript6 (es6) 文件

发布时间:2023-09-06 01:20责任编辑:郭大石关键词:Web配置编译es6

所需基础

  • node.js

  • nmp



开始


1、首先新建一个空项目,减少干扰更快的看到配置效果。



2、在项目中创建一个 man.js 文件 。


  • 进入设置:

    「 File ?Settings ?Languages&Frameworks ?JavaScript 」


  • 将 JavaScript language version 改成 ECMAScript 6 。


    650) this.width=650;" src="https://s3.51cto.com/oss/201710/26/932af7de1a3df7c9721fc9c446cc045b.png-wh_500x0-wm_3-wmp_4-s_4018765102.png" title="1.png" alt="932af7de1a3df7c9721fc9c446cc045b.png-wh_" />


  • man.js 中输入 ES6 代码,例如:


var Name = ‘Michael‘;function multiply(x, y) { return x * y; };export { Name, multiply as f1}


3、在根目录新建一个 package.json 文件,『这一步如果没有完成,下面的安装会报错』。


  • 输入内容:

{    "name": "test-es6toes5",    "version": "1.0.0"}



4、在Terminal中安装相应的包 。


  • npm install --save-dev babel-clinpm install --save-dev babel-preset-es2015cnpm i babel-preset-env --save-dev


    650) this.width=650;" src="https://s3.51cto.com/oss/201710/26/18911da5c37132e6e7972739ae4edfdf.png-wh_500x0-wm_3-wmp_4-s_2186475672.png" title="2.png" alt="18911da5c37132e6e7972739ae4edfdf.png-wh_" />




5、添加 File Watchers 。


  • 进入设置:

    「 File ?Settings ?Tools ?File Watchers 」


  • 点击 「+」 号,选择 「 Bable 」。


  • 修改 「 Program 」 一项为以下内容,「此为 windows 设置,其他操作系统自行选择相应的 babel 运行文件」:


「YourProjectDir」\node_modules\.bin\babel.cmd例如:C:\MyProject\node_modules\.bin\babel.cmd


650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/eb880fcc91c465f7ac906a30e134e7a9.png-wh_500x0-wm_3-wmp_4-s_134602318.png" title="3.png" alt="eb880fcc91c465f7ac906a30e134e7a9.png-wh_" />



6、这样就设置完成了,man.js 更改后会进行自动编译,放在项目根目录 dist 文件夹下。


注意



如果能帮到你,赞我一下呗


End.

本文出自 “范斯特罗夫斯基” 博客,请务必保留此出处http://headlock.blog.51cto.com/2772396/1976432

Pycharm ?WebStorm 配置 babel 实现自动编译 ECMAScript6 (es6) 文件

原文地址:http://headlock.blog.51cto.com/2772396/1976432

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved