[]官方文档里的位图字体的制作与使用JS 跑不通 以及 文档的几个问题

https://ldc2.layabox.com/doc/?nav=zh-js-1-2-5
 
你好，我是新手，跟着文档简介-2D基础篇这样跑下来的。 文档里的代码我贴在最后，有几个问题想问下。
 
1.示例里除了第一个hello，其它都没有说明代码放在什么文件和怎么调用；hello那个没有提import。
 
2.我就是自建文件，然后在Main.js里import它了。 这是官方的方式吗？
 
3.我的报错 
TypeError: Cannot set property 'mFontName' of undefined
 
at Object.2 (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:279:21)
 
at o (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:265)
 
at file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:316
 
at Object.3../GameConfig (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:313:1)
 
at o (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:265)
 
at r (file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:431)
 
at file:///D:/Git/Laya/myLayaJS/bin/js/bundle.js:11:460
 
4.这个位图字体教程的代码应该放在哪里，怎么引用，其中的this是指？ 我自建了单独的文件，并在Main里import了它，输出看是undefined。
 
5.几处的路径不一致，它们的关系是？ 
a.如图：把test_0.png名字改为test.png,保证跟fnt文件同名。再把test.png和test.fnt文件放到H5目录下。
b.

1. //这里不需要扩展名，外部保证fnt与png文件同名

2. this.mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Laya.Handler(this,onLoaded));

c.将字体文件放到 LayaAir IDE 项目的资源目录中（laya/assets/）
d.
 
6.完整代码如下所示：

1. //初始化引擎

2. Laya.init(550,400);

3. //自定义文件名称

4. this.mFontName = "diyFont";

5. this.mBitmapFont = new Laya.BitmapFont();

6. //这里不需要扩展名，外部保证fnt与png文件同名

7. this.mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Laya.Handler(this,onLoaded));

8.  

9. function onLoaded(){

10. init();

11. }

12. function init(){

13. //如果位图字体中，没放空格，最好设置一个空格宽度

14. this.mBitmapFont.setSpaceWidth(10);

15. Laya.Text.registerBitmapFont(this.mFontName,this.mBitmapFont);

16. var txt = new Laya.Text();

17. txt.text = "这是测试";

18. //设置宽度，高度自动匹配

19. txt.width = 250;

20. //自动换行

21. txt.wordWrap = true;

22. txt.align = "center";

23. //使用我们注册的字体

24. txt.font = this.mFontName;

25. txt.fontSize = 50;

26. txt.leading = 5;

27. Laya.stage.addChild(txt);

28. }