typescript - 对于可用于浏览器或节点的 Typescript 模块，我应该使用什么模块构建策略？

问题描述

我在这里绕圈子——让我按照我目前的理解来布局我对模块的理解。如果我在任何方面错了，请纠正我。

模块有助于避免命名空间污染（即具有相同名称的变量），同时还允许您编写代码以使您知道自己依赖于模块。

（即，另一种选择是您编写一些代码，假设 jquery 作为全局变量存在，并且由于您不确定它们是否被使用，因此粗略地删除了各种依赖项。）

CommonJS是为 Nodejs 创建的解决方案，而RequireJS（又名 AMD）是为浏览器创建的解决方案。

然而——从 ES2015 开始，Javascript 中的模块有一个标准化规范——现代浏览器支持它，而它正在为 NodeJS 工作。

打字稿- 我的理解是打字稿将编译到指定的模块策略中compilerOptions.module- 即。"module": "commonjs" 将编译为 CommonJS 使用的语法，而"module" : "amd"将编译为 require 语法。我假设"module": "es2015"编译为 ES2015 标准模块语法。

我正在尝试做的事情：

我正在尝试编写几个包含简单 ES6 类的库。然后这些库将被另一个库使用——它也将使用 Typescript。

开始：

mkdir foo bar biz

在每个目录中：

tsc --init && npm init

这将为我们提供一个默认的 tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

  }
}

但是在同一个文件夹.ts中编译和编译有点混乱.js，而且我们需要声明文件，所以我将在每个文件夹上将其更改为：

{
    "compilerOptions": {
      /* Basic Options */
      "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
      "module": "commonjs",                     /* Specify module code */
      "declaration": true,                   /* Generates corresponding '.d.ts' file. */
      "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
      "outDir": "./lib/",                        /* Redirect output structure to the directory. */
      "rootDir": "./src/",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
      "strict": true,                           /* Enable all strict type-checking options. */
      "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

    }
  }

在 package.json 我们还需要改变这个：

"main": "lib/index.js",

（但稍后会对此提出问题）。

在foo：

**src/index.ts**


export function hello() : string {
    return "hello!"; 
}

export function myRandom() : number{
    return Math.random(); 
}

我们将运行：

tsc 
sudo npm link

这将在lib/文件夹中为我们提供：

lib/index.d.ts

export declare function hello(): string;
export declare function myRandom(): number;
//# sourceMappingURL=index.d.ts.map

lib/index.d.ts.map

{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,IAAK,MAAM,CAE/B;AAED,wBAAgB,QAAQ,IAAK,MAAM,CAElC"}

lib/index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function hello() {
    return "hello!";
}
exports.hello = hello;
function myRandom() {
    return Math.random();
}
exports.myRandom = myRandom;

在酒吧：

src/alpha.ts

import {hello, myRandom} from "foo"; 

export class Alpha {

    blurp () : string {
        return hello() + myRandom(); 
    }
}

src/beta.ts

export class Beta {


    flurf () : number {
        return Math.random(); 
    }
}

我们将把它链接到我们的 foo 模块并编译：

sudo npm 链接 foo tsc sudo npm 链接

这编译得很好：在我们的 lib/ 文件夹中，我们有：

 - alpha.d.ts
 - alpha.d.ts.map 
 - alpha.js
 - beta.d.ts
 - beta.d.ts.map
 - beta.js

有趣的文件是lib/alpha.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var foo_1 = require("foo");
var Alpha = /** @class */ (function () {
    function Alpha() {
    }
    Alpha.prototype.blurp = function () {
        return foo_1.hello() + foo_1.myRandom();
    };
    return Alpha;
}());
exports.Alpha = Alpha;

但这就是我失败的地方：

在商务

我希望能够做这样的事情：

src/app.ts

import {hello} from "foo"; 
import {Alpha, Beta} from "bar"; 

const a = new Alpha(); 
const b = new Beta(); 

console.log(a.blurp());  
console.log(b.flurf()); 
console.log(hello());

但我们在这里得到的是[ts] Cannot find module 'bar'.

现在这也许是有道理的。bar 的 package.json 指向一个index.js不存在的。

现在我可以尝试更改 bar 的 tsconfig 以将输出文件设置为lib/index.js- 但 typescript 不喜欢这样：

tsconfig.json:5:5 - error TS6082: Only 'amd' and 'system' modules are supported alongside --outFile.

    5     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
          ~~~~~~~~

    tsconfig.json:13:6 - error TS6082: Only 'amd' and 'system' modules are supported alongside --outFile.

    13      "outFile": "./lib/index.js",                       /* Concatenate and emit output to single file. */

所以我可以将模块更改为“amd”，但它不会找到包“foo”

src/alpha.ts:1:31 - error TS2307: Cannot find module 'foo'.

1 import {hello, myRandom} from "foo";

你得到图片。

有没有人对我在这里需要了解的内容有一些全面的建议？

我的偏好是使用import {ItemA, ItemB} from "my-module";语法，但如果我正在编写需要特定导入配置的模块，我会担心一件事。

我把所有的代码放在这里：

https://github.com/dwjohnston/typescript-issues

标签： typescriptecmascript-6modulees6-modules

typescript - 对于可用于浏览器或节点的 Typescript 模块，我应该使用什么模块构建策略？

问题描述

解决方案

推荐阅读