目录规范

BUI-Weex 提供的脚手架工程是在官方的基础上进行改造的，主要包括以下几个方面特性：

  • 动态生成 webpack 入口
  • 支持 Sass 加载器
  • 支持加载工程目录下图片资源
  • 支持加载 ttf 字体图标文件

先来看看目录结构，然后再逐个分析实现的机制！

目录结构

  • bui-weex-template
    • assets —— weex官方内置
    • build —— weex官方内置，自定义脚本,在 npm run serve时候使用
    • dist —— webpack打包生成的目录，包含js,image,ttf等
    • node_modules —— 工程依赖的npm package
    • src —— 业务代码
      • entry —— 放置webpack的入口，多个入口就放在这里
        • app.js —— 入口文件
      • image —— 放置图片资源
        • logo.png —— 内置logo图片
      • js —— 放置js公共代码目录
      • views —— 放置视图页面
        • app.vue —— 对应app.js的视图页面
    • .babelrc —— 支持ES6语法的配置文件，删除后无法使用ES6
    • config.js —— 启动Server的时候自动生成的文件(npm run serve)
    • index.html —— PC预览首页
    • package.json —— npm的配置文件，里面包含依赖配置、Scripts配置等
    • webpack.config.js —— webpack的脚本文件
    • weex.html —— PC预览页面,index.html 嵌入的 iframe页面

特性：动态生成 webpack 入口

标准的webpack配置entry是需要指定文件的，为了方便使用，框架将自动遍历 src/entry目录并生成对应的 js bundle

关键代码 (webpack.config.js):

  1. // 遍历文件入口,动态生成入口
  2. function getEntries () {
  3.     var entryFiles = glob.sync('./src/entry/**', { 'nodir': true})
  4.     var entries = {};
  5.     for (var i = 0; i < entryFiles.length; i++) {
  6.         var filePath = entryFiles[i];
  7.         var filename = filePath.split('entry/')[1];
  8.         filename = filename.substr(0, filename.lastIndexOf('.'));
  9.         entries[filename] = filePath;
  10.     }
  11.     return entries;
  12. }

特性：支持 Sass 加载器

框架内使用 Sass的语法来写样式，对应的样式文件是 *.scss，框架做了支持：

在 package.json 中配置如下依赖：

  1.  "node-sass": "^4.5.2",
  2.  "sass-loader": "^6.0.3",

在 web.config.js 中配置如下loader:

  1. loaders: [
  2.     {
  3.      test: /\.scss$/,
  4.      loader: 'style!css!sass'
  5.     }
  6. ]

特性：支持加载工程目录下图片资源

官方的<image>组件不支持加载本地工程的图片，只加载远程的 http 图片。框架做了处理，将 src/image 目录下的图片资源在编译阶段拷贝到 dist 目录下，开发人员就可以通过 <bui-image> 来使用本地的图片。

在 web.config.js 中

  1. //  文件拷贝插件,将图片拷贝到dist目录
  2. var copyPlugin = new copy([
  3.     {from: './src/image', to: "./image"}
  4. ])

使用方式:

  1. <bui-image src="/image/logo.png" width="244px" height="172px"></bui-image>

特性：支持加载 ttf 字体图标文件

框架提供了<bui-icon>组件，里面用到 ionicons 的字体文件 ttf，框架在编译阶段将其拷贝到 dist 目录。组件内部会从 dist 目录下找到 这个ttf文件。

  1. //  文件拷贝插件,将字体拷贝到dist目录
  2. var copyPlugin = new copy([
  3.     {from: './node_modules/bui-weex/src/font', to: "./font"}
  4. ])