如何使用TypeScript在浏览器中使用NPM包？

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 

    <script src="../node_modules/systemjs/dist/system.js"></script> 
    <script src="../node_modules/lodash/index.js"></script> 
</head> 
<body> 
    <script> 
     System.config({ 
      packages: {'js': {defaultExtension: 'js'}} 
     }); 

     System 
      .import('./js/app') 
      .catch(console.error.bind(console)); 
    </script> 
</body> 
</html>

app.ts

import {_} from 'lodash'; 

export class App {};

当我尝试transpiling打字稿到JavaScript我得到的错误如下：

error TS2307: Cannot find module 'lodash'.

使用TypeScript时，将NPM包装加载到项目中的最标准/推荐的方式是什么？

注意

node_modules是访问和文件node_modules/lodash/index.js被送达正确。
我试图不使用Bower，因为我觉得应该用NPM来代替。
我正在使用SystemJS，我相信它是一个通用模块加载程序。

来源

2015-12-04 Pablo

对于初学者来说，即使您的node_modules目录是可访问的，我通常会使用一些独立的客户端软件包，像Bower（它本身就是一个NPM软件包）。其次，您可能需要在浏览器中的其他脚本之前加载像commonjs或requirejs这样的依赖管理器，而导入支持直接构建到Node中。 – Katana314

Hi @ Katana314感谢您的评论。在“注释”下查看我的答案。 – Pablo

“*我发现它应该用NPM完成。” - “你能否进一步解释这个推理？我应该注意到，我的node_modules目录往往包含很多文件，这些文件绝对没有意义的被公开地提供，并且对您而言也是如此。 – Katana314

首先，打字稿找不到您的模块，因为您需要将打字稿放在您的文件中。其次，您需要使用--module系统标志（或tsconfig.json中的等效项）导出打字稿。第三，它需要使用systemjs加载。我强烈建议你为此使用JSPM，我知道我知道 - 另一个软件包管理器，但它更像是NPM上的扩展。它可以让你很容易地管理你的Systemjs代码。 http://jspm.io/

来源

2015-12-04 16:18:26 Zachrip

我怕我不跟SystemJs famililar，但是从我所知道的模块装载机，他们承认库，他们从装载的路径，而不是模块的全局名称或任何东西。所以，通过<script>加载lodash实际上并不能帮助它知道它是否拥有它，或者回馈什么对象。用基本的术语来说，你需要通过你的模块加载器加载它，而不是单独加载它。

但是，您可能不希望将“../node_modules/”写入脚本中的所有require语句中;那会很烦人。您可以查看SystemJs的配置文档，看看是否有创建映射的方法，以便特定的模块名称会自动使它知道为脚本使用特定的路径。

来源

2015-12-04 16:53:58 Katana314

如何使用TypeScript在浏览器中使用NPM包？

回答

相关问题