Alan Hou的个人博客

Odoo 14前端框架OWL之如何开启Owl项目

完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版

🦉 如何开启一个Owl项目 🦉

Content

综述

每个软件项目都有其具体的需求。这其中很多需求可通过一些工具得以解决:webpackgulp、css预处理器、打包工具、编译器…

正因为如此,通常开启一个项目都不是那么简单。一些框架提供自有工具来协助完成。但那样会需要进行集成并学习如何使用这些应用。

Owl的设计可以让其完全不依赖于任何工具。因此,Owl可以“轻松地”与现代构建工具链进行集成。本节中,我们将讨论启动项目的不同配置方式。每个方式在不同场景下都存在着优劣势。

简单html文件

最简单的配置如下:一个包含你自己代码的简单 JS 文件。我们可以创建如下文件结构:

owl.js文件可通过https://github.com/odoo/owl/releases来下载最近发布的版本。这是一个单独的 JS 文件,它将所有的Owl导出到一个全局owl对象中。

index.html中应包含如下内容:

app.js的内容如下:

现在只需要在浏览器加载这一 html 文件就会显示欢迎消息。这一配置并不高级,但极为简单。没有用到任何第三方工具。通过使用Owl最小化构建(owl.min.js)可以实现一定的优化。

使用静态服务器

以上的配置有一个非常大的缺点:应用代码位于单个文件中。很明显我们可以将其分为多个文件并在html页面中的多个<script>标签中进行引入 ,但那样我们需要确保脚本插入的顺序正确,还需要在全局变量中导出每个文件的内容,在文件间无法进行自动补全。

针对这一问题有一个技术含量不高的解决方法:使用原生 JS 模块。但这有一个要求,出于安全原因,浏览器不接受file协议所分发的模块内容。这意味着我们需要使用一台静态服务器。

我们使用如下文件结构启动一个新项目:

和前面一样,可通过https://github.com/odoo/owl/releases下载最新版本的owl.js

index.html中应包含如下内容:

注意在main.js的script标签中有一个type="module"属性。这表示浏览器会将该脚本解析为一个模块,并加载其所有依赖。

下面是app.js 和 main.js的内容:

main.js文件中导入了app.js文件。注意导入语句中有一个.js后缀,这很重要。在部分文本编辑器都能理解这一语法并会提供自动实例功能。

接下来要执行这段代码,我们需要静态地对src文件夹提供服务。一种低技术含量的方式是使用python SimpleHTTPServer 这类功能:

译者注:Python 3启动 HTTP 服务的模块不同于 Python 2,为: python3 -m http.server 8022

另一种更为javascript的方式是创建一个npm应用。可通过在项目根目录下添加如下package.json文件来实现:

此时即可通过执行npm install命令来安装serve工具,通过npm run serve命令来启动一个静态服务器。

标准Javascript项目

前面的配置没有问题,对很一部分用例也是不错的选择,包括快速原型验证。但它缺乏一些有用的功能,比如实时重载、测试套装或在单个文件中打包代码。

这里面的每种功能或其它很多功能,可通过很多不同方式实现。配置这类项目并不简单,我们这里提供了一个入门的示例。

我们的标准Owl项目文件结构如下:

项目中的public文件夹用于包含所有静态资源,如图片和样式文件。src文件夹中有一个 JS 源码文件,在tests中包含一个测试套件。

以下是index.html的内容:

注意其中不包含<script>标签。这些会通过webpack进行注入。下面我们来看 JS 文件:

最后是配置文件.gitignorepackage.json 和 webpack.config.js

通过这一配置,就可使用如下脚本命令了:

退出移动版