美文网首页
Win7环境下Webstorm配置ES6环境

Win7环境下Webstorm配置ES6环境

作者: Jenkhh | 来源:发表于2017-12-22 11:46 被阅读0次

文章的系统环境

以下是文章描述的系统已经安装的情况,没有安装的请搜索一下相关模块的安装文章,这里就略过了。

系统:win7

Webstorm:2017-3

nodejs:v6.11.2

npm:3.10.10

(国内cnpm:3.10.10)

安装步骤

1、创建目录(testes6)并初始化项目:

mkdir testes6

cd testes6

npm init -y

2、安装babel

cnpm install -g babel-cli(非国内的可以直接:npm install -g babel-cli)

3、项目当前目录安装babel-cli

cnpm install --save-dev babel-cli

4、安装babel-preset-es2015

cnpm install --save-dev babel-preset-es2015

5、安装babel-preset-env

cnpm i babel-preset-env --save-dev

6、webstorm配置 Javascript的环境默认ES6.

7、webstorm配置babel监视文件变化

8、创建.babelrc文件,写入配置:

{ "presets": [ "es2015" ], "plugins": []}

9、创建test.js文件

let msg = 'hello world!';

console.log(msg);

10、录入js代码,项目自动生成disk目录

let msg = 'hello world!';

console.log(msg);

11、运行js

有点击test.js,选择运行,系统就能把运行结果打印出来。

至此,环境已经配置完成!

额外的一个配置:

参考下图,需要把nodejs/NPM的code 提示enable才能有相关的代码提示。

相关文章

  • Win7环境下Webstorm配置ES6环境

    文章的系统环境 以下是文章描述的系统已经安装的情况,没有安装的请搜索一下相关模块的安装文章,这里就略过了。 系统:...

  • Webstorm下配置node环境

    Step 1 下载node.js并配置全局 ① 点此进入nodejs下载界面 注:Ⅰ. 不知道在哪找高级系统设置就...

  • webstorm下RN环境配置

    IDE下载及破解 webstorm是一款好用的前端IDE,跟androidstudio的爸爸intellij id...

  • hadoop-java客户端搭建&WordCount

    java客户端&开发环境搭建 win7下开发环境配置 1 先官网下hadop,然后配置HADOOP_HOME. 2...

  • ReactNative踩坑填坑(一)

    RN环境的搭建和IDE的选择 一、mac下环境的搭建 二、WebStorm 下面导入模块的es6的结构语法在Chr...

  • day10

    A 一、webstorm下配置sass环境 二、sass概念,语法 概念参考:http://blog.csdn.n...

  • Webstorm下配置jasmine测试环境

    Step 1 初始化npm npm init -y按照默认值创建Package.json项目管理文件 Step ...

  • vue环境搭建

    安装运行环境 大概的步骤 打包 目录结构解析 WebStorm配置Vue开发环境

  • 使用Xdebug插件分析webshell

    环境:win7/phpstudy2016 配置:php.ini文件 注意配置里xdebug路径设置,根据自己的环境...

  • 8)HDFS客户端操作

    环境搭建 1)下载 win10 或 win7 下编译过的 Hadoop jar 包 2)解压缩 配置环境变量 3)...

网友评论

      本文标题:Win7环境下Webstorm配置ES6环境

      本文链接:https://www.haomeiwen.com/subject/ypdtgxtx.html