开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

gulp babel和babel-preset-es2015在WebStorm 2017中不能正常工作

问题：gulp babel和babel-preset-es2015在WebStorm 2017中不能正常工作。

回答：

gulp是一个基于流的自动化构建工具，用于优化前端开发流程。babel是一个JavaScript编译器，用于将ES6+的代码转换为向后兼容的JavaScript版本。babel-preset-es2015是babel的一个预设，用于转换ES6代码。

在WebStorm 2017中，如果gulp babel和babel-preset-es2015不能正常工作，可能是由于以下原因：

缺少必要的插件或配置：确保已经安装了gulp和babel相关的插件，并正确配置了gulpfile.js文件。
版本兼容性问题：检查gulp、babel和babel-preset-es2015的版本是否兼容。建议使用最新版本的gulp和babel，并确保babel-preset-es2015与babel的版本匹配。
编译错误或警告：查看WebStorm的控制台输出，检查是否有编译错误或警告信息。根据错误信息进行相应的调试和修复。
文件路径配置错误：确认gulpfile.js文件中的文件路径配置是否正确，包括输入文件和输出文件的路径。
缺少依赖项：检查项目的package.json文件，确保已经安装了所有必要的依赖项。可以使用npm install命令安装缺少的依赖项。

如果以上方法都无法解决问题，可以尝试以下步骤：

更新WebStorm：确保使用的是最新版本的WebStorm，以获取最新的功能和修复的bug。
重置WebStorm设置：尝试重置WebStorm的设置，可以通过File -> Manage IDE Settings -> Restore Default Settings来进行操作。
咨询开发者社区：如果问题仍然存在，可以在相关的开发者社区或论坛上寻求帮助，向其他开发者请教或寻求解决方案。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云提供了一系列云计算相关的产品和服务，包括云服务器、云数据库、云存储等。具体推荐的产品和链接如下：

云服务器（CVM）：提供灵活可扩展的云服务器实例，支持多种操作系统和应用场景。了解更多：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、高可靠的云数据库服务，支持自动备份、容灾等功能。了解更多：https://cloud.tencent.com/product/cdb
云存储（COS）：提供安全可靠的对象存储服务，适用于图片、音视频、文档等各种类型的文件存储。了解更多：https://cloud.tencent.com/product/cos

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行。

相关搜索:在NavMenu和Div中不能正常工作 Jquery在Chrome中不能工作，在Safari和Firefox中也不能正常工作 JS SlideUp和SlideDown在表上不能正常工作在python和pygame中计数循环不能正常工作通过在laravel中不能正常工作来联接和分组 M-<和M->在emacs中不能正常工作过滤和查询公式在Google Sheets中不能正常工作 asyncData生命周期在Nuxt和Vue中不能正常工作 Css媒体查询在chrome和safari中不能正常工作这段jquery代码在显示和关闭菜单中不能正常工作 Css :after和:before伪元素在IOS中不能正常工作 Flask和SQLAlchemy db.session.commit()在更新时不能正常工作 .表格-单元格和.table显示在IE上不能正常工作为什么couchdb和fauxton在Windows10中不能正常工作？DataTables加载数据，但是按钮和排序在Angular 4中不能正常工作 typescript类导出和导入在react应用程序中不能正常工作在React中使用Context和Reducer实现Redux功能不能正常工作设备宽度和设备高度在桌面浏览器中不能正常工作吗？push_back和insert在我自己的矢量类中不能正常工作带有Libgdx的Android Studio :在触摸和触摸拖动事件上音效不能正常工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【译】在 Webstorm 中使用 ReactJS：编码辅助、代码规范、重构以及编译

动态模板和 Emmet 工作方式很像 —— 输入特殊缩写就可以自动展开成代码片段。...You will also need Babel and, if using Babel 6 and ES6 code, babel-preset-react and babel-preset-es2015...你也将使用到 Babel，如果使用 Babel 6 和 ES6 代码的话，babel-preset-react 和 babel-preset-es2015 可以用来编译你的代码。...同样地，你也可以在 WebStorm 中启动 Gulp 或者 Grunt 任务。...你也可以在 WebStorm 中给 Babel 和 Browserify 装一个文件监听器，用来执行相似命令（你可以阅读这里），但是如果你需要很多步骤的话，通过 npm 脚本或者 Gulp 的方式就可以给你更多的可扩展性

5.7K1 0

Gulp 快速入门

什么是 gulp 简单的讲，gulp 是一个构建工具，一个基于流的构建工具，一个 nodejs 写的构建工具，使用 gulp 的目的就是为了自动化构建，提高程序员工作效率。...之前先执行 task1 和 task2 gulp.task('default', ['task1', 'task2'], () => { console.log('Hello World'); })...转化为 ES5 语法： (1) 安装 babel-core babel-preset-es2015 $ npm install --save-dev babel-core babel-preset-es2015...gulp-babel $ npm install --save-dev gulp-babel (5) 编写 gulpfile 在根目录新建一个 gulpfile.babel.js 文件。...gulp-watch 开始工作以后，每次改动 index.js 都要手动 gulp 一下实在太麻烦了，使用 gulp-watch 可以监听文件变化，当文件被修改之后，自动将文件转换。

8211 0

webpack3.x文件配置

demo", "version": "1.0.3", "description": "EOI", "main": "gulpfile.js", "dependencies": { "babel-preset-es2015...": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-runtime...babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0...--public：覆盖--inline客户机模式下使用的主机和端口（对VM或Docker有用）。 --lazy：不看，根据要求进行编译（不能与之组合--hot）。...包括在提供请求时使用的自签名证书。 --cert，--cacert，--key：路径的证书文件。 --open：在默认浏览器中打开url（对于webpack-dev-server版本> 2.0）。

8532 0

博客优化小记

趁着周末把博客优化了一下，主要优化以下几点：阅读统计和访客统计添加评论升级hexo版本和NexT版本配置SEO 静态文件cdn加速使用gulp压缩文件添加lazyload 添加站内搜索阅读统计和访客统计...gulp-imagemin babel-core babel-preset-es2015 npm install -D @babel/core 安装后的包版本如下 "babel-core": "^6.26.3...", "babel-preset-es2015": "^6.24.1", "canvas-nest.js": "^2.0.3", "core-util-is": "^1.0.2", "gulp": "^...": "^5.0.1", "gulp-imagemin": "^7.1.0", "gulp-uglify": "^3.0.2", "@babel/core": "^7.8.4" 在执行过程中可能会遇到一些包版本问题...在项目根目录下新建 gulpfile.js 文件 var gulp = require('gulp'); var babel = require('gulp-babel'); var cleancss

5052 0

Webstorm配置babel将.js文件转换为es5

前言最近编写工具站(Laravel + Vue.js【是引用.js文件，不是前端vue.js后端laravel】)的时候，写js的时候，是在不想写es5语法，比如写var，Webstorm提醒使用let...而node.js中可以使用babel将es6语法转换为es5语法。所以我就想能不能利用babel，将单个.js文件的语法转换为es5？经过一番实践，成功了。...安装babel-preset-env npm install babel-preset-env --save Babel已经弃用了babel-preset-es2015，现在最新启用的是babel-preset-env...在命令行里面使用因为webstorm中的External Tools工具，本质也就是调用命令行而已。所以我先尝试在命令行里面使用看看能不能成功。...webstorm配置新建Babel ? 如下图 ?

2.6K0 0

将 ES6 代码转换成 ES5

本文介绍用 Gulp 和 Babel 6 来将 ES6 代码转换成 ES5 代码。如果用其他工具配合 Babel 来做，可以见这里。不知道 Gulp 是什么？请先查看Gulp 入门指南。 1....install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-preset-es2015...Gulp 配置 gulpfile.js 的内容，形如 var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task(...babel = require("gulp-babel"); var concat = require("gulp-concat"); gulp.task("default", function (...Babel 配置在项目根路径创建文件 .babelrc。内容为 { "presets": ["es2015"] } 4.

4352 0

搭建babel将es6转es5环境

但在babel6中，将babel拆分成两个包： babel-cli和babel-core。...babel src -d lib -s 上面代码是在全局环境下，进行Babel转码。...$ npm install babel-core --save 然后，在项目中就可以调用babel-core。...① 在项目中安装 gulp执行： npm install gulp --save-dev ② 安装转码规则： npm install --save-dev gulp-babel babel-preset-es2015....pipe(gulp.dest("lib")); }) 当我们在当前项目目录下运行 gulp 命令后，会发现原本在src文件夹中的a.js(按照ES6标准编写的)文件已经被转码成ES5标准的a.js

6461 0

腾讯云主机上测试BootStrap4编译FlexBox

准备工作首先下载BootStrap V4。 Bootstrap V4 目前最新版还是alpha版本，如链接失效，请移步官网。 BootStrap 然后你需要安装了node，gulp，自行下载即可。...variables和breakpoints，我们先将他们引入。...首先npm init 初始化一个 package.json 引入一些包 "devDependencies": { "babel-core": "^6.3.26", "babel-preset-es2015...": "^6.3.26", "babel-preset-es2015": "^6.16.0", "babel-register": "^6.18.0", "del": "^2.2.2...", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-babel": "^6.1.2", "gulp-plumber

2.2K0 0

前端构建系统-《node.js实战》

": "^6.26.0", "babel-preset-es2015": "^6.24.1", "uglify-es": "^3.3.9" } } 解释： 1...."build": "npm run babel && npm run uglify" 组合babel和uglify。...touch fulpfile.js //创建fulpfile.js 文件 npm i --save-dev gulp-sourcemaps gulp-babel babel-preset-es2015...下面举个例子，用gulp.src查找jsx文件，用babel处理ES2015和React，然后把文件拼到一起。...在终端输入gulp就可以运行这个这个Gulp任务了。一个好用的热重载工具：gulp-watch。。。监控文件系统的变化。

1.9K2 0

ES6 新特性示例

例如想定义一个html代码片段，放在一行很难看，想用多行，还得用字符串拼接 var html = '' + 'test' + ''; 一堆加号和引号...下面是个简单的ES6代码转换示例（1）安装环境需要你的机器上已经装了nodejs、gulp 然后安装babel客户端 $ npm install -g babel-cli 在项目目录下安装相关插件...$ npm install gulp $ npm install --save-dev gulp-babel $ npm install --save-dev babel-preset-es2015...babel = require("gulp-babel"); gulp.task("default", function () { return gulp.src("a.js")...dist目录下（3）执行编译在项目目录中执行 $ gulp 执行结束后，到dist目录下查看编译后的a.js

7906 0

webpack 热更新（实施同步刷新）

2、webpack 支持es6转码安装 //安装转码规则 npm install babel-core babel-loader babel-preset-es2015 babel-preset-react...": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react...插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。...npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev...author": "", "license": "ISC", "keywords": [], "description": "" } 这里有一点提醒大家，package.json中name不能跟我们的模块和项目文件目录同名

8093 0

(2424) webpack小案例--自己动手用webpack构建一个React的开发环境

1.安装webpack 1.1 新建文件夹在安装webpack之前，我们先建立一个文件夹,并利用开发工具webstorm打开刚才新建的文件夹（或者新建项目，其项目目录选择刚才新建的文件夹），然后使用webstorm...2.配置webpack.config.js 在项目根目录建立webpack.config.js文件，这个文件是进行webpack配置的，先建立基本的入口和出口文件。...Babel安装配置在webpack中配置Babel需要先加入babel-loader，我们使用npm来进行安装，我们还需要支持es2015和React，所以要安装如下四个包：此处为了兼容问题我使用指定版本的安装方式...babel-preset-es2015 babel-preset-react 这里四个包的安装，这四个包是不能省略。...安装后你会在package.json里看到这些包的版本如下： "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-es2015

7272 1

(源码开放) React + webpack3 多页面应用及常见问题解答

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 github: https://github.com/frontend-everyone/...": "^3.9.1", "gulp-vsftp": "^0.7.8", "gulp-zip": "^4.0.0", "html-webpack-plugin": "^2.30.1..."import/no-webpack-loader-syntax": 0, "no-script-url": 0 } } } 2、打包问题主要是执行 npm run p 在mac...上会 set= 错误在windows 平台如下是正常的 ?...在MAC电脑上需要改成 export BABEL_ENV=production ? 3、打包图片地址问题 ? 在这个地方添加路径即可，如： ?

4323 0

webpack+vue项目实战（一,搭建运行环境和相关配置）

": "^6.10.1", "babel-core": "^6.14.0", "babel-loader": "^7.0.0", "babel-preset-es2015": "...还有一个就是，这个是一个json文件，不能在这里写注释喔！否则会报错！) 安装完了之后，项目目录应该是这样的。 ?....idea是我用webStorm编辑器开发，自动生成的文件 node_modules是安装之后生成的node模块文件， .npmrc是使用淘宝的镜像的文件，内容如下 registry = http://...接下来就配置入口文件，和入口文件的模板了。...但是，大家有没有发现，在浏览器的地址栏，出现的是‘http://localhost:9090/dist/ht...’。结果是正常的，因为前面我们配置了路由，并且使用了路由！

1.1K1 0

gulp+webpack工具整合简介

webpack特点 Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。...，而且大大提高我们的工作效率。...gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。...gulp-less –save-dev； 7.3、将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md； 7.4、为了能正常使用...10、使用webstorm运行gulp任务 10.1、说明：使用webstorm可视化运行gulp任务； 10.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp

1.5K8 0

gulp+webpack工具整合简介

webpack特点 Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。...，而且大大提高我们的工作效率。...gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。...、为了能正常使用，我们还得本地安装gulp：cnpm install gulp –save-dev； PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行...10、使用webstorm运行gulp任务 10.1、说明：使用webstorm可视化运行gulp任务； 10.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show

2.4K5 0

JS 静态类型检查工具 Flow

本文主要介绍了解决JS作为弱类型语言没有类型检查痛点的静态类型检查工具 Flow ，并且介绍了在WebStorm中使用Flow的方法，最后介绍了一些常用的Flow语法。 1....安装方法 npm安装： npm install --save-dev babel-cli babel-preset-flow flow-babel-webpack-plugin babel-preset-es2015...flow-bin flow-babel-webpack-plugin babel-preset-es2015 babel-preset-env babel-plugin-transform-class-properties...但是flow不能直接在node或浏览器环境中使用，所以我们必须用babel编译后才能使用，使用File watcher： ?....* [options] module.file_ext=.js module.file_ext=.vue 现在当我们在项目中使用Flow时WebStorm可以给出智能的提示了。 ?

3.1K5 0

针对 webpack + es6 + react 安装使用及其遇到的问题！

主要是针对 webpack + es6 + reactWeb 安装使用及其所遇到的问题，为了不耽误大家宝贵的时间及其阅读繁琐，我先一次性的把安装使用的步骤介绍完，然后在分析所遇到的问题！...babel-loader babel-preset-es2015 babel-preset-react npm install --save autoprefixer npm i style-loader...例如：如果你不想使用gulp去解决import不存在的情况下，使用webpack进行解决，安装执行命令即可 npm install –save-dev babel-core babel-loader...babel-preset-es2015 babel-preset-react ---- 问题2：当你使用ES6的 import 引用css 的时候，例如：在运行 webpack 的时候，报错...而这里的，style-loader 和css-loader 就需要你 npm 安装下了。

3202 0

9012教你如何使用gulp4开发项目脚手架

该脚手架的设计思路和功能如下：同时为了提高开发环境的效率，这里我们参考webpack的配置，区分开发环境和生产环境，在接下来将会具体介绍。...在这里我要说一点，由于笔者亲测gulp-md5-plus有时候打包不稳定，可能不会给html自动添加对应的md5后缀，所以笔者在这块做了特殊的处理，如果大家在工作中有更好的方案，可以及时和笔者沟通交流。...package.json { "dependencies": { "@babel/core": "^7.4.5", "babel-preset-es2015": "^6.24.1",...（https://github.com/MrXujiang/gulp4_multi_pages）最后该脚手架任然有需要完善的地方，比如如何兼容uglify和babel,md5需要使用两次的情况，如果更好的解决方案...在脚手架选型上，也不一定非要用gulp，webpack，一般的经验是传统型的静态网站适合用gulp，由于不需要编译es6，所以有更小的体积，当然也可以用webpack，本文主要是给大家提供一使用gulp4

1.4K1 0

用webpack配置Riot Redux工程

名词介绍 webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片Riot的tag文件等都作为模块来使用和处理。..."dependencies": { "babel-core": "^6.3.17", "babel-loader": "^6.2.0", "babel-preset-es2015..."webpack-dev-server": "^1.14.1" } npm install 3.配置每个webpack项目下都有一个 webpack.config.js ，它的作用如同gulp...的gulp.js或者fis3的fis-conf.js ，就是一个配置项，告诉 webpack 它需要做什么。...} return state; }; var store = redux.createStore(reducer); riot.mount('*', { store }); 在src

5519 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭