调试工具

浏览器同步调试工具： BrowserSync

• 安装(推荐全局安装)：

npm  install   -g  browser-sync 

• 启动BrowserSync

静态网站

如果想要监听某些文件，browserSync 将启动一个小型服务器，并提供一个url来供你查看你的网站

browser-sync  start  --server  --files  " 要监听的文件"

如果要监听多个文件，只需用逗号隔开。

 browser-sync   start  --server  --files  "css/*.css, *.html"   
  // 监听css文件夹中所有以.css和以.html结尾的文件
 browser-sync start   --server  --files   .
  // 监听当前目录下的所有文件

动态网站

如果已有其他本地服务器环境PHP或者类似的，需要使用dialing模式。BrowserSync 将通过代理URL（localhost:3000）来查看你的网站：

 browser-sync start  --proxy  "主机名"   "css/*.css"
//主机名可以是ip或域名

• 一般情况本地如果有服务器，就不要在用browser-sync了，例如使用webpack时，跨域的代理地址，不要用本地回环地址：localhost ，改成本机ip地址（在配置文件index.js中更改），即可通过手机访问该地址。

JavaScript语法编辑器： Babel的基本用法；

• 目前移动端浏览器，主要是安卓手机，比支持es6语法，苹果兼容较好，通过Babel可以将es6语法转换为浏览器兼容的ES5语法；

• 安装：推荐在项目中安装；

 npm install --save-dev  babel-cli 

2, 安装babel-preset-es2015插件：

npm install  --save-dev  babel-preset-es2015

注： Babel5版本默认包含个各种转换插件，然而Babel6.x版本相关转换插件需要自己下载，而ES2015preset包含了所有插件。如果不安装任何插件，那么在命令行进行转换时没有任何效果的。

3. 插件配置：

• 安装转换插件：
  官方提供的规则集

  • ES2015转码规则
    $ npm install --save-dev babel-preset-es2015

  • react转码规则
    $ npm install --save-dev babel-preset-react

  • ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

• 在根目录新建.babelrc文件

• 文件内容格式

  • 基本格式

     {
       "presets": [],  // 设置转码规则
       "plugins": []  //  设置插件
      }
    

  • 加入相应转换规则后：

      {
        "presets": [
             "es2015",
              "react",
              "stage-2"
          ],
        "plugins": []
      }
    

• 在package.json文件scripts中配置命令之一：

1.
{
 "scripts": {
   "build": "babel src -d lib"    // 编译src目录中的所有内容，编译好的内容输出到lib目录下
  },
}

2.  {
      "scripts": {
         "bulid": "babel js -w --out-dir lib"    // 编译并监听src目录中的所有内容，编译好的内容输出到lib目录下
        },
    }
3.  {
      "scripts": {
         "bulid": "babel src --out-file main.js"    // 编译并监听src目录中的所有内容，编译好的内容输出到指定的文件main.js中。
        },
    }