导入 Typescript @types 导致 browserify 出错答案

【问题标题】：importing Typescript @types causes browserify to error导入 Typescript @types 导致 browserify 出错
【发布时间】：2017-05-04 19:16:28
【问题描述】：

当我使用 import 语句在 gulp 中运行 browserify 时出现错误。我可以在没有它的情况下将其捆绑，但随后会出现类型错误。我有几个导入类型的文件，但是，当我尝试运行 browserify 时，我得到了

错误：无法从“/Users/lonniemcgill/Desktop/Projects/Typescript/ssadmin/development/assets/ts/views”中找到模块“chart.js”

我的 tsconfig 如下所示：

{
    "files": [
        "ts/main.ts"
    ],
    "compileOnSave": true,
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5",
        "moduleResolution": "node",
        "typeRoots": ["./node_modules/@types"],
        "types": ["jquery", "chart.js"],
        "sourceMap": true
   }
}

我的导入看起来像这样：

import * as Chart from "chart.js";

visual studio 代码识别出它是一种类型，因为智能不会给我任何错误。没有导入它会起作用，但我会收到一堆类型错误。如何让 browserify 与包含的 import 语句捆绑？

这是我用于该任务的 gulp 代码。

gulp.task('browserify', function() {
    return browserify({
           basedir: '.',
           debug: true,
           entries: ['ts/main.ts'],
           cache: {},
           packageCache: {}
        })
       .plugin(tsify)
       .transform(babelify, {
           presets: ['es2015'],
           extensions: ['.ts', '.js']
       })
       .bundle()
       .pipe(source('bundle.js'))
       .pipe(buffer())
       .pipe(sourcemaps.init({ loadMaps: true }))
       .pipe(uglify())
       .pipe(sourcemaps.write('./'))
       .pipe(gulp.dest("js/compiled"));
});

【问题讨论】：

您是通过脚本标签加载chart.js 吗？将其作为模块加载（首选），或创建declare global 类型的垫片。也可能有一些 Browserify 特定的方式来映射它。
我已将所有 Bower 组件编译到 vendor.js 文件中，并将其加载到脚本标签中。
那就是为什么
单独包含 Chart.js 文件并不能解决问题。 Chart.js 正在工作。这与编译器无法识别 node_modules/@types/bundle.js 的路径并在我的视图文件中查找模块有关。我需要 browserify 来识别@types。我正在尝试导入文件以解决打字稿类型错误。
不，这不是正在发生的事情。发生的事情是，由于您在值位置使用导入，因此它不会被忽略。由于它没有被忽略，Browserify 尝试从 node_modules/chart.js 导入它。我建议你用 npm 安装它

标签： typescript gulp browserify babeljs

【解决方案1】：

由于您在值位置（而不是仅在类型位置）使用导入，因此打字稿不会忽略它。这意味着发出的 JavaScript 具有 import（转译为 require）。

Browserify 将因此尝试从 node_modules 导入它。

要修复错误，您有几个选择：

使用 npm 安装 chart.js
```
npm install --save chart.js    
```
然后将其从您的供应商捆绑包中删除。

这应该是首选方法。这是使用 Browserify 或 Webpack 等工具的主要原因之一。
为 chart.js 创建一个全局声明，这样您就不必导入它。
```
import chartjs = require('chart.js');
declare global {
  const Chart = chartjs;
}
```
然后删除导入。
使用 Browserify 特定的配置技术告诉它 chart.js 实际上映射到全局。

这个答案解释了如何：https://stackoverflow.com/a/23129051/1915893

【讨论】：

【解决方案2】：

对于那些感兴趣的人，我在打字稿文档中找到了答案。 https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html Use /// <reference types="chart.js" /> 或者你的@type 是什么。而不是导入，以便它与打字稿兼容。

【讨论】：