代码之家 › 专栏 › 技术社区 › Josh M.

使用Typescript输出纯JS,而不是模块?

typescript javascript

1

Josh M. · 技术社区 · 7 年前

import { x } from "./other-funcs";

function y() {
    alert("test");
}

x(y);

其他-功能

import { z } from "some-module";

export function x(callback: () => void): void {
    z();
    callback();
}

(注意“其他-功能“使用import语句从其他模块导入函数。)

我想编译 index.ts <script src="index.js"></script> ,并立即在浏览器中执行(显示警报)。

function x(callback) {
    callback();
}

function y() {
    alert("test");
}

x(y);

我似乎无法得到正确的TS配置来获得这个结果。请告知。

注意:这与 this question 因为我需要使用 import

1 回复 | 直到 7 年前

1

4

Get Off My Lawn 7 年前

香草JavaScript

import 它将始终构建成一个模块。但是,您可以使用 namespaces 沿着 "module": "system" ,然后可以将其输出到单个文件(或多个文件)。

因此,对于一个非常基本的项目,您将有以下几点:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "system",
    "outFile": "./lib.js"
  },
  "include": [
    "./**/*.ts"
  ]
}

接下来,您将创建如下所示的文件:

索引.ts

namespace MyNamespace {
  // This is a private method that cannot be accessed in other files
  // the reason for that is because it isn't exported.
  function y() {
    alert("test");
  }

  x(y)
}

功能.ts

namespace MyNamespace {
  // This method can be referenced in other files because it is exported.
  export function x(callback: () => void): void {
    callback();
  }
}

生成的浏览器代码

var MyNamespace;
(function(MyNamespace) {
  function x(callback) {
    callback();
  }
  MyNamespace.x = x;
})(MyNamespace || (MyNamespace = {}));
var MyNamespace;
(function(MyNamespace) {
  function y() {
    alert("test");
  }
  MyNamespace.x(y);
})(MyNamespace || (MyNamespace = {}));

MyNamespace.y()
MyNamespace.x(MyNamespace.y)
// etc.

使用requirejs

使用 进口 在您的项目中,您将需要一个第三方库 requirejs

"module": "amd" .

tsconfig.json文件

{
  "compilerOptions": {
    "target": "es2016",
    "module": "amd",
    "outFile": "./lib.js"
  },
  "include": [
    "./**/*.ts"
  ]
}

接下来,我们需要创建适当的typescript主文件:

requirejs(['functions'], function (util: any) {
  function y() {
    alert("test");
  }

  util.x(y)
})

因为它使用的是第三方库,所以它的初始化方式不同(使用 requirejs() ). 这告诉requirejs这是应用程序的入口点,因此只需要一次。

功能.ts

export function x(callback: () => void): void {
  callback();
}

define("functions", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    function x(callback) {
        callback();
    }
    exports.x = x;
});
requirejs(['functions'], function (util) {
    function y() {
        alert("test");
    }
    util.x(y);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

data-main 在script标签上,requirejs将自动加载文件。

<script data-main="./lib" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

This feature is still experimental, and not supported in all browsers type="module" 脚本标记上的属性:

<script type="module" src="./path/to/main.js"></script>

tsconfig.json文件

target 和 module outDir
注: es2016 不是有效的模块类型。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "es2015",
    "outDir": "./lib"
  },
  "include": [
    "./**/*.ts"
  ]
}

索引.ts

注: 进口 .js 否则浏览器将无法加载它,除非您有适当的重写规则。

import { x } from './functions.js'
function y() {
  alert("test");
}

x(y)

功能.ts

导出函数x(回调:()=>void):void{
回调();
}

这将输出与ts文件几乎相同的结果(Stackoverflow不支持外部js文件,除非它们托管在某个地方,所以这里没有代码段):

// index.js
import { x } from './functions.js';
function y() {
    alert("test");
}
x(y);

// functions.js
export function x(callback) {
    callback();
}