現代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配置項目呢，後面會介紹。