Question

当我使用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代码识别它是一种类型，因为intellisence不会给我任何错误。没有导入它将工作但我得到一堆类型错误。如何让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"));
});

Answer 1

由于您在值位置使用导入（而不是仅仅在类型位置），typescript不会忽略它。这意味着发出的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

Answer 2

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

导入Typescript @types会导致browserify出错

2 个答案: