Weex Loader 技术文档

安装指南

安装依赖

要使用 Weex Loader，首先需要安装相关的 npm 包。可以通过以下命令进行安装：

npm install weex-loader babel-loader --save

升级到 v0.3

如果你已经使用了旧版本的 Weex Loader，建议升级到 v0.3 版本。升级时需要注意以下几点：

• 旧的加载分文件的方式已被弃用，请使用新的方式。
• 如果你依赖的 weex-components 版本低于 v0.1，请将其更新到 v0.2。
• 在 .js 文件中使用 @weex-module/xxxx 时，可以使用一些 hack 方式，具体参考 issue。

项目的使用说明

如何加载 .we 文件

要加载 .we 文件，首先需要配置 webpack 配置文件。以下是一个示例配置：

module.exports = {
  entry: './main.we?entry',
  output: {
    path: './dist',
    filename: 'main.js'
  },
  module: {
    loaders: [
      {
        test: /\.we(\?[^?]+)?$/,
        loader: 'weex'
      }
    ]
  }
};

如何编写分文件

可以通过在 .we 文件中指定 src 属性来加载分文件。例如：

<template src="./main.html"></template>
<style src="./main.css"></style>
<script src="./main.js"></script>

为加载器添加自定义语言

可以在 webpack 配置中添加自定义语言配置。例如：

  weex: {
    lang: {
      jade: ['jade-html'] // 使用 jade 语言时会链接到 "jade-html-loader"
    }
  }

然后在 .we 文件中使用自定义语言：

<template lang="jade">
div
  text Hello Weex
</template>

如何将 .we 文件作为组件元素加载

可以通过以下步骤将 .we 文件作为组件元素加载：

1. 在 script 中通过 require('./foo.we') 或 <element name="foo" src="./foo.we"></element> 引入组件。
2. 在 template 中使用该组件，例如 <foo></foo>。

示例代码：

<element name="foo" src="./foo.we"></element>

<template>
  <div>
    <foo></foo>
    <bar></bar>
  </div>
</template>

<script>
  require('./bar.we')
</script>

如何指定组件名称

默认情况下，组件名称是路径的 basename 去掉扩展名。可以通过以下方式指定组件名称：

1. 在 require 请求中添加 name 查询参数，例如 require('./foo.we?name="fooo"')。
2. 在 element 标签中指定 name 属性，例如 <element name="fooo" src="./foo.we"></element>。
3. 在 template 中使用指定的名称，例如 <fooo></fooo>。

示例代码：

<element name="fooo" src="./foo.we"></element>

<template>
  <div>
    <fooo></fooo>
    <baar></baar>
  </div>
</template>

<script>
  require('./bar.we?name=baar')
</script>

项目API使用文档

加载 .we 文件

通过 weex-loader 可以加载 .we 文件，并将其转换为可执行的 JavaScript 代码。

加载分文件

可以通过 src 属性加载 .js、.css 和 .html 文件。

自定义语言

可以通过 weex.lang 配置自定义语言，并链接到相应的加载器。

组件名称

可以通过 require 请求中的 name 查询参数或 element 标签中的 name 属性指定组件名称。

项目安装方式

项目安装方式非常简单，只需通过 npm 安装 weex-loader 和 babel-loader 即可：

npm install weex-loader babel-loader --save

安装完成后，按照上述使用说明配置 webpack 即可开始使用 Weex Loader。