现代WebGIS开发教程之ES6基础2——开发环境

开端
  Node.js环境配置好以后，可以在命令行通过交互式方法编写代码，没有语法检查，没有提示，效率比较低，因此需要一个趁手的IDE，我不打算在这里讨论什么IDE好，高手用vim，全靠命令也比你快。我这里介绍的是WebStorm/IntelliJ的基本配置。
基本操作
  WebStorm/IntelliJ官网免费下载试用。地址：https://www.jetbrains.com/web... https://www.jetbrains.com/idea 下载安装后，就可以用了打开后应该长这样，中介略去初始插件配置，美化配置，授权环节若干步骤...

  接下来就可以新建项目了，做开发英语是基本的素质，不要问我有没有汉化版，菜单在哪里。这货支持的项目类型挺多

  我偏喜欢从头开始，项目走起
  然后自己在项目下面新建一个目录，IDE在下方可以激活Terminal窗口，进入子目录，敲命令

cd path/to/dir

真正的新建项目
  IDE新建项目时为了方便IDE的管理，而作为Web项目，真正的管理工具是npm，在terminal中敲

npm init

  在一系列提示和输入之后就完成创建了，至于提问部分：项目名，版本，简述，入口文件，测试命令，git库地址，关键词，作者，开源协议。好吧，做项目要本着开源精神。总之最后yes后面回车就ok了。再看看IDE，打开生成package.json，就是这样了，这里我删除了test命令。

  接下来在目录面新建src目录，创建index.js，编写代码，可以看到有语法提示了

let result = console.log('Hello, World!');
console.log(result);

  配置运行

  然后运行

  输出的结果和上篇交互式环境中一样输出，我们可以理解为交互式环境默认都加了console.log输出语句结果，因此出现了undefined。
  到目前为止只是运行，三分代码，七分调试，IDE的调试功能很重要，把代码改成

const greeting = `Hello, World!`;
let result = console.log(`${greeting}`);
console.log(result);

  在let result = console.log(${greeting});处设置断点，点击调试按钮，弹出调试面板，程序运行到此处就会停止，可以添加监视变量，逐过程，逐语句调试，各种调试功能就出现了。

  以上就是WebStorm/IntelliJ的基本操作，本篇npm创建了项目，但是运行调试还没有用上，为什么要npm配置项目呢，后面会介绍。