零基础学习weex（三）weex工程及工具

本篇内容：

 Weex的项目结构
 npm
 webpack
 ESLint
 Devtools
 

一、Weex的项目结构

通过weex init WeexDemo创建一个WeexDemo工程，结构及对应的功能如下：

 ├──assets #资源目录 用于prew页面二维码
 │ ├──qrcode.min.js
 │ ├──qrcode.js
 │ ├──url.js
 │ └──style.css
 ├──build #编译生成ip地址的配置文件录
 │ └──init.js
 ├──dist #编译出来的js目录
 │ ├──app.web.js #web端使用这个文件
 │ └──app.weex.js #native使用这个文件
 ├──node_modules #项目依赖包
 ├──src #源码目录
 │ └──foo.vue
 ├──.babelrc #babel配置文件
 ├──.eslintrc #eslint配置文件
 ├──.gitignore
 ├──index.html #web端页面和二维码预览页面
 ├──weex.html #web端页面
 ├──package.json #npm的配置文件
 ├──app.js #声明的vue实例
 └──webpack.config.js #webpack配置文件
 

二、npm

在搭建weex环境中我们就引入了npm，那时候主要是用作JavaScript包管理工具，此章主要介绍npm script。npm对应的文件是package.json，定义在package.json里面的脚本，就称为npm脚本。下图是创建weex时默认生成的package.json：

packageJson.jpg

• 上面的一部分是项目相关信息
• scripts节点就是我们要研究的npm 脚本
• dependencies节点是项目发布的依赖
• devDependencies 节点是项目开发工具

初始化

npm init，配置对应的参数，如git repo，name，version之类。

npm run & npm run-script

这两命令的效果都是一样的，都能执行 package.json 文件 scripts 字段下指定的任务

&与&&：

• &表示并行执行（即同时的平行执行），例如$ npm run script1.js & npm run script2.js同时执行
• &&表示继发执行（即只有前一个任务成功，才执行下一个任务），例如$ npm run script1.js && npm run script2.js，先执行script1.js，执行完后执行script2.js

通配符：

表示任意文件名，*表示任意一层子目录，例如：
"lint": "jshint *.js"
"lint": "jshint */.js"

默认值

npm 对两个脚本提供了默认值，这两个脚本不用定义，就可以直接使用，如下：
"start": "node server.js"，
"install": "node-gyp rebuild"，前提是项目根目录下有binding.gyp文件

简写

npm start是npm run start
npm stop是npm run stop的简写
npm test是npm run test的简写
npm restart是npm run stop && npm run restart && npm run start的简写

参考

三、webpack

webpack 简单的说就是一个打包工具，可以通过配置loader，将各种JS(比如Vue, Coffee, JSX等),样式(css,sass,less,stylus等等)，图片资源进行打包。
webpack 一大优点是可以通过配置loader，加载我们的的类型文件，也可以做一些代码压缩，预处理，代码风检测，别名的设置 下面附上一些设置的例子，仅供参考 配置 scss, sass的 loader，将图片转化成base64格式

resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'components': path.resolve(__dirname, './src/components'),    # 配置别名  在js或者vu中可以使用别名，简化导入文件的路径
      'common': path.resolve(__dirname, './src/common'),
      'utils': path.resolve(__dirname, './src/utils'),
      'examples': path.resolve(__dirname, './src/examples'),
      'style': path.resolve(__dirname, './src/style'),
      'filters': path.resolve(__dirname, './src/filters'),
      'mixins': path.resolve(__dirname, './src/mixins')
    }
  },
  preLoaders: [                             # 配置eslint  将对vue 和js 文件做代码风格检查
      {
        test: /\.vue$/,
        loader: 'eslint',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        exclude: /node_modules/
      }
    ],
loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.css$/, loader: 'style-loader!css-loader'               # 配置css 的loader
      },
      {
        test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader'   # 配置scss sass的loader
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,                  # 将图片转化成base64格式
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
    ]

四、ESLint

ESLint 是由 Nicholas C. Zakas 编写的一个可扩展、每条规则独立、不内置编码风格为理念的 Lint 工具。
简单来说，Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能。一方面团队协作中能够统一团队代码风格化，另一方面能够提前知道可能会存在的问题，避免低级 Bug。比如在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。

EsLint提供以下支持：

• ES6
• AngularJS
• JSX
• Style检查
• 自定义错误和提示

EsLint提供以下几种校验：

• 语法错误校验
• 不重要或丢失的标点符号，如分号
• 没法运行到的代码块
• 未被使用的参数提醒
• 漏掉的结束符，如}
• 确保样式的统一规则，如sass或者less
  -检查变量的命名

Weex如何使用EsLint？

在创建Weex工程后webpack中有一段注释就是提示你应该用一下 ESLint，如下

module: {
      // // You can use ESLint now!
      // // Please:
      // // 1. npm install {
      // //   babel-eslint
      // //   eslint
      // //   eslint-config-standard
      // //   eslint-loader
      // //   eslint-plugin-html
      // //   eslint-plugin-promise
      // // } --save-dev
      // // 2. set .eslintrc
      // //   take { "extends": "standard" } for example
      // //   so you need: npm install eslint-plugin-standard --save-dev
      // // 3. set the config below
      // preLoaders: [
      //   {
      //     test: /\.vue$/,
      //     loader: 'eslint',
      //     exclude: /node_modules/
      //   },
      //   {
      //     test: /\.js$/,
      //     loader: 'eslint',
      //     exclude: /node_modules/
      //   }
      // ],

并且创建完Weex项目后，一般目录下面会有.eslintrc文件，如果没有请开启隐藏文件。默认配置为：

{
  "root": true,
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module"
  },
  "globals": {
    "Vue": false,
  },
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "arrow-parens": 0,
    "generator-star-spacing": 0,
  }
}

解释一下：

• root
  默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 “root”: true。ESLint 一旦发现配置文件中有 “root”: true，它就会停止在父级目录中寻找。
• parser
  ESLint 默认使用Espree作为其解析器
• globals
  当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
• extends
  一个配置文件可以被基础配置中的已启用的规则继承。
• plugins
  一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置。要确保这个包安装在 ESLint 能请求到的目录下。plugins 属性值 可以省略包名的前缀 eslint-plugin-。
• rules
  规则。请参考官方文档 。

1、安装
你可以自己使用npm安装：npm install -g eslint
你也可以在Weex工程中配置， 在package.json 的devDependencies加入注释中表明的安装依赖，重新使用npm install安装模块，如图：

"devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "ip": "^1.1.4",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^1.14.0",
    "weex-devtool": "^0.2.64",
    "weex-loader": "^0.4.1",
    "weex-vue-loader": "^0.2.5",
    "url-loader": "^0.5.7",

    "babel-eslint": "^7.1.1",
    "eslint": "^3.16.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-config-weex": "^0.1.4",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-html": "^2.0.1",
    "eslint-plugin-promise": "^3.4.2",
    "eslint-plugin-standard": "^2.0.1"
  }

2、打开webpack中preLoaders
3、重新打包，npm run dev，如果有代码风格问题，会自动报错。当然，有些警告并不影响程序运行，只是为了统一风格。

五、Devtools

Weex 开发了一套 Weex Devtools，它与 Chrome Devtools 极为相似，学习成本很低，目前只支持在 Chrome 浏览器里使用。在终端输入weex debug指令（最新版本 starter kit 添加了 npm run debug 支持），会弹出 Weex Devtools，打开 Playground，扫描 Devtools 的二维码来启动 Debugger。
这块讲解起来比较繁杂，需要在使用过程中摸索，饿了么讲解的不错传送门；github上也有也经典讲解https://github.com/weexteam/article/issues/50。

 Tip：学习的过程中要多看别人的开源源码，推荐两个AppStore能下载的app，附上开源链接
 
 
1、WeexPlayground官方的demo，基础组件的学习
 
 
2、煎蛋(https://github.com/totzcc/WeexHTMLParse)