现代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配置项目呢，后面会介绍。