Cordova in VisualStudio Code

编者语:这几年都在跨平台移动开发中努力,Xamarin/Cordova/RemObject都是业界比较通用的方案。而开发工具有Visual Studio /Xamarin/ Fire等。就在昨天微软发布并开源了Visual Studio Code 的Cordova开发工具,今天就和大家谈谈。

       

       Visual Studio Code 快发布差不多一年了,在Connect 2015中已经开始支持各类型的插件。而新的一年,将会是Visual Studio Code 很重要的一年。新年开了个不错的头,就是Cordova的开发工具。这个工具支持Cordova的开发,调试,和相关插件的智能提示。我们就来看看几个功能。

       1. 安装,在Mac上打开Visual Studio Code 按cmd+shift+p 使用ext install 进行安装

       Cordova in VisualStudio Code_第1张图片

       2. 编码,其实这个你就等于是有智能提示地写一些Cordova的支持。例如你添加一些插件,如相机等。

          

       3. 你可以通过Visual Studio Code 快速编译你的Cordova项目 cmd+B

       Cordova in VisualStudio Code_第2张图片

       4. 可以方便在Debug中根据不同需要调用不同的运行环境

       Cordova in VisualStudio Code_第3张图片

      以上四点,你可以在Visual Studio Market 中找到 (https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools)

       5. 代码调试,这个也得感谢微软Cordova的团队,他们帮我解决了在VS Code 上Ionic 2调试的问题。下面我分享给大家。

           首先你必须对现在Ionic 2的webpack.config.js进行调整

           a) 由于VS Code 的Cordova 插件是通过绑定source-map进行调试的 所以先安装 

               npm install source-map-loader strip-sourcemap-loader

           b) 在webpack.config.js 中添加 devtool:'source-map' ,去生成app.bundle.js.map

           c) 指定在调试期间,所对应的位置,在output添加devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'

           d) 在loaders最后设置一个,这个是告诉编译器都需要把所有js加载到sourcemap当中

        {
            test: /\.js$/,
            loader: 'strip-sourcemap'
        }
           e) 切记这里不要用Cordova Build, 要用ionic build所以这里比较麻烦地需要在命令行运行,当然你可以通过设置Task去做

               但这个我觉得还是命令行方便(我在这里还是花了不少时间,还是自己大意)

           f) 在app.bundle.js设置对应的断点即可,我现在还没有办法去调试ts(这个估计是webpack的问题,但是我相信很快会有对应的               解决方案),但是可以直接调试ts生成的js文件,如图我在app.bundle.js设置了断点,当我在运行debug时就可以去到断点位                 置了。

           Cordova in VisualStudio Code_第4张图片

           

        Visual Studio Code 随着插件功能的加入,现在已经可以作为生产力工具了。我也已经把它作为生产力工具多时去完成云加端的开发。Cordova插件的推出为跨平台开发带来了不少推动作用,当然接下来我更期待的是ReactNative和Xamarin。

               

  

你可能感兴趣的:(code,Cordova,Studio,Visual,Studio,Visual)