零基础学习weex（三）weex工程及工具
零基础学习weex（三）weex工程及工具
本篇内容： <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>
腾讯云开发者
