1)源代码如下:
git clone https://github.com/tensorflow/tfjs-models
2)编译:
tfjs-models>yarn
tfjs-models>cd posenet
tfjs-models\posenet>yarn
tfjs-models\posenet>cd demos
\tfjs-models\posenet\demos>yarn
tfjs-models\posenet\demos>yarn parcel build index.html (这一步很重要,用parcel编译js,最后汇总成一个js前端文件)
输出如下:
----------------------------------------------------------------------------------------------
$ C:\Users\jmmy\Downloads\tfjs-models\posenet\demos\node_modules\.bin\parcel build index.html
/ Building coco.html...Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
\ Building coco.html...Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
- Building posenet.esm.js...Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
√ Built in 16.41s.
dist\camera.83bdd5c6.js.map ‼ 4.09 MB 352ms
dist\coco.8f7bfb53.js.map ‼ 4.08 MB 351ms
dist\camera.83bdd5c6.js 998.63 KB 13.57s
dist\coco.8f7bfb53.js 994.59 KB 13.96s
dist\camera.html 1.81 KB 3.56s
dist\coco.html 1.74 KB 1.62s
dist\index.html 251 B 510ms
Done in 17.60s.
3)启动:
demos>cd dist
tfjs-models\posenet\demos\dist>http-server
Starting up http-server, serving ./
4)总结:
A)这里的posenet是前端javascipt代码,但是还是用nodejs的目录结构
B)camera.js demo_util.js 和node_modules里面的有些模块会被编译到dist\camera.83bdd5c6.js的前端js代码中,
这在编译后的camera.html中包含的<script src="/camera.83bdd5c6.js"></script>可以反映出来;或者camera.js的源码也可以反映出来:
import * as posenet from '@tensorflow-models/posenet';
import dat from 'dat.gui';
import Stats from 'stats.js';
import {drawBoundingBox, drawKeypoints, drawSkeleton, isMobile, toggleLoadingUI, tryResNetButtonName, tryResNetButtonText, updateTryResNetButtonDatGuiCss} from './demo_util';
const videoWidth = 600;
const videoHeight = 500;
const stats = new Stats();
5)parcel的构建理解:
A)以前Browserify的作用(https://www.ibm.com/developerworks/cn/web/1501_chengfu_browserify/index.html):
Browserify 作为 NodeJS 模块与浏览器端应用之间的桥梁,让应用可以直接使用 NodeJS 中的模块,并可以把应用所依赖的模块打包成单个 JavaScript 文件。通过 Browserify 还可以在应用开发中使用与 NodeJS 相同的方式来进行模块化和管理模块依赖。如果应用的后台是基于 NodeJS 的,那么 Browserify 使得应用的前后端可以使用一致的模块管理方式。即便应用的后端不使用 NodeJS,Browserify 也可以帮助进行前端代码的复用和组织。
B)parcel也是一个类似Browserify的构建工具,并且更高效:
a)自动转换
如若有需要,Babel, PostCSS, 和 PostHTML 甚至 node_modules 包会被用于自动转换代码。只需要自定义好 babelrc.json、postcss.config.js、tsconfig.json 等配置文件就可以直接转换代码,如果 Parcel 发现打包时有缺少的依赖(如 babel plugin 等)就会自动帮你安装并且加到 package.json 的 devDependencies 中,如果不看控制台,你甚至对此无感。