斐浦软件 - 静态文件

支持的文件格式

.js (Modern syntax with and importexport)
.ts (TypeScript files)
.vue (Vue single file components)
.css (CSS processed using PostCSS)
.scss (SASS files)
.sass (SASS files with indentation syntax)
.styl (Stylus files)
.less (Less files)

打包

bench build
# build only frappe assets
$ bench build --apps frappe

# build only frappe and erpnext assets
$ bench build --apps frappe,erpnext

Watch模式

当代码有变化时，自动rebuild，从14版本开始，如果静态文件有变化，自动重新加载

bench watch
Watching for changes...
1:17:28 PM: Compiled changes...

# watch only erpnext assets
$ bench watch --apps erpnext

除了上面的命令，也可以配置文件中设置common_site_config.json.LIVE_RELOADlive_reload

打包文件

样例

注意一下上面的样式文件，打包后的文件后缀均为.css，这在hooks中引用时需要记住的事情；

导入第三方库

安装

在app路径下安装，例如安装dayjs库

cd frappe-bench/apps/myapp
yarn add dayjs

代码调用方法

myapp/public/main.bundle.js

import * as dayjs from 'dayjs';
console.log(dayjs())

HTML调用静态文件方法

含JS文件和样式文件CSS

index.html

<meta charset="utf-8"/>
<meta content="IE=edge"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>My App</title>
    {{ include_style('style.bundle.css') }}
    <div id="myapp"></div>
    {{ include_script('main.bundle.js') }}

index.html（渲染）

<meta charset="utf-8"/>
<meta content="IE=edge"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>My App</title>
<link href="/assets/myapp/dist/css/style.bundle.SYKETW5P.css" rel="stylesheet" type="text/css"/>
<div id="myapp"></div>
    &lt;script type="text/javascript" src="/assets/myapp/dist/js/main.bundle.BYJXV4LB.js"&gt;&lt;/script&gt;

Hooks设置

在[app]/hooks.py中设置后，JS文件和样式文件就可以包含在app.html中了；

app_include_js = ['main.bundle.js']
app_include_css = ['style.bundle.css']

Jinjia中获取静态文件路径

{{ bundled_asset('main.bundle.js') }}

渲染后为

/assets/myapp/dist/js/main.bundle.BYJXV4LB.js

Python API调用方法

文件名：jinja_globals.py

from frappe.utils.jinja_globals import bundled_asset, include_script, include_style

bundled_asset('main.bundle.js')

延迟加载静态文件

也就是需要的时候再加载，不需要提前加载，使用frappe.require；

frappe.require('main.bundle.js').then(() => {
  // main.bundle.js is now loaded
})

生产模式打包

生产模式打包，输出的包最小；

$ bench build --production