Question

我在这里盘旋-让我按照目前的理解来安排对模块的理解。如果我在任何方面都不对，请纠正我。

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

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

CommonJS 是为Nodejs创建的解决方案，而 RequireJS（aka 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;

但这是我不满意的地方：

在 biz

我希望能够执行以下操作：

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-但是打字稿不喜欢这样：

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

Answer 1

我最好的解决方案是创建一个index.ts文件并填充：

   export * from "./alpha.ts"; 
   export * from "./beta.ts";

等

这也使您可以控制要实际导出的模块。

我应该为可用于浏览器或节点的Typescript模块使用哪种模块构建策略？

1 个答案: