电子和书写：如何在运行时正确处理模块？

问题描述

我正在Typescript写一个Electron桌面应用程序。编译后，项目组织看起来像这样：

• dist
  
  
  
  
  • html
    
    
    
    
    • index.html
    
    
  
  
  • 脚本
    
    
    
    
    • ApplicationView.js
    
    
    • ApplicationViewModel.js
    
    
  
  

在 index.html 我有这个脚本标签：

 < script src =../ scripts / Application.js> ;< /脚本> 
  

我的所有文件都是从Typescript到ES2015（针对ES6和使用ES6模块）编译的，由Babel到ES5。 ApplicationView.ts 如下所示：

  ///< reference path =../../ typings / main.d.ts/> 
 
 import * as $ fromjquery; 
 import * as ko fromknockout; 
从./ApplicationViewModel导入ApplicationViewModel; 
 
 $（document）.ready（（）=> {
 ko.applyBindings（new ApplicationViewModel（Hello！））; 
}）; 
  

这里是 ApplicationViewModel.ts 的内容：

  import *作为ko从knockout; 
 
导出默认类ApplicationViewModel {
 public greeting：KnockoutObservable< string> ;; 
 
构造函数（greeting：string）{
 this.greeting = ko.observable（greeting）; 
} 
} 
  

电子抛出一个错误，表示找不到模块 ./ ApplicationViewModel 。但是，在调试器控制台中，我可以成功导入模块：

  require（ ../scripts/ApplicationViewModel）; 
  

所以，出了什么问题是很明显的。脚本标签有效地将 Application.js 的内容复制到HTML文件中，更改模块相对路径的上下文。我的问题是我该怎么做？

我看过使用 require.js 在脚本标签。但Electron运行在Node.js.如果这是处理我的问题的正确方法，那为什么我需要另一个模块加载器？我如何确保这两个玩得很好？

解决方案

很简单我用这个替换了HTML文件中的< script> 标签：

 <脚本> 
 require（../ scripts / ApplicationView）; 
< / script> 
  

像一个魅力一样工作！现在我只需要弄清楚为什么JQuery不能正常工作...

I'm writing an Electron desktop application in Typescript. After compilation, the project organization looks something like this:

• dist
  • html
    • index.html
  • scripts
    • ApplicationView.js
    • ApplicationViewModel.js

In index.html I have this script tag:

<script src="../scripts/Application.js"></script>

All my files are compiled from Typescript to ES2015 (targeting ES6 and using ES6 modules) and transpiled by Babel to ES5. ApplicationView.ts looks like this:

///<reference path="../../typings/main.d.ts" />

import * as $ from "jquery";
import * as ko from "knockout";
import ApplicationViewModel from "./ApplicationViewModel";

$(document).ready(() => {
    ko.applyBindings(new ApplicationViewModel("Hello!"));
});

Here's the contents of ApplicationViewModel.ts:

import * as ko from "knockout";

export default class ApplicationViewModel {
    public greeting: KnockoutObservable<string>;

    constructor(greeting: string) {
        this.greeting = ko.observable(greeting);
    }
}

Electron throws an error saying it can't find the module ./ApplicationViewModel. However, in the debugger console, I can successfully import the module with:

require("../scripts/ApplicationViewModel");

So, what's wrong is obvious. The script tag effectively copies the contents of Application.js into the HTML file, changing the context for the module's relative path. My question is what should I really be doing?

I've seen the use of require.js in the script tag. But Electron runs on Node.js. If this is the right way to handle my problem, why then would I need another module loader? How would I make sure the two play nice?

解决方案

Figured it out. Pretty simple actually. I replaced the <script> tag in the HTML file with this:

<script>
    require("../scripts/ApplicationView");
</script>

Works like a charm! Now I just need to figure out why JQuery isn't working properly...

这篇关于电子和书写：如何在运行时正确处理模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！