Question

我有点卡住而不知道接下来该做什么，在我尝试过的所有尝试之后都没有找到任何正常工作的解决方案来寻找答案...

我做了一个非常简单的项目来演示我当前的问题you can see it on github，甚至在您的计算机上下载并运行它。

最后一个想法是在项目本身有一个/dist/clients.js文件，因此我可以在HTML文件（/dist/index.html）中使用它，因为我不能使用CommonJs作为我的打字稿加载模块（我有几个文件，而不仅仅是一个）我选择amd加载器（因此在HTML文件中调用requirejs）。

<html>
    <head></head>
    <body>
        <h1>TS Testing...</h1>
        <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js" type="text/javascript"></script>
        <script src="client.js" type="text/javascript"></script>
        <script type="text/javascript">
            require(['clients/client'],
                function(require) {
                    var sc = new require();
                }
            );
        </script>
    </body>
</html>

typescript从grunt ts运行正常，并创建带有映射的client.js

我遇到的问题是它没有加载整个项目，引发错误：

来自文件/libs/core/tc-cookies.ts：

var JsCookie: Cookies.CookiesStatic = require("js-cookie");

如何以正确使用项目的方式加载 npm模块？我在ts-loader选项中有moduleResolution: "node"，但似乎没有做正确的工作......

Github project available这个问题

Answer 1

问题在于加载上下文的顺序在项目的当前状态中是未知的，您可以编写一些代码来提供正确的模块加载顺序或使用某种模块加载器，如{{3} }或webpack。我强烈建议选择webpack和browserify这是打字稿模块加载的常用选择。

摆脱该错误的步骤：

更改您的tsconfig.json，它应如下所示：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "rootDir": "."
    },
    "compileOnSave": false,
    "exclude": [
      "node_modules"
    ]
}

删除html中的所有脚本标记。
创建webpack.config.js文件。请参阅webpack.config.js npm页面上ts-loader应如何显示的示例。（部分配置）
使用webpack输出路径在html中创建脚本标记。

如何从节点加载外部模块

Github project available这个问题

1 个答案: