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

2017-03-30 本文已影响108人 sweetpf

本篇内容：
<pre>
Weex的项目结构
npm
webpack
ESLint
Devtools
</pre>

一、Weex的项目结构

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

<pre>
├──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配置文件
</pre>

二、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。

<pre>
Tip：学习的过程中要多看别人的开源源码，推荐两个AppStore能下载的app，附上开源链接

1、WeexPlayground官方的demo，基础组件的学习👍

2、煎蛋(https://github.com/totzcc/WeexHTMLParse)
</pre>