2017-05-04 146 views
1

我在导入语句中运行browserify时出现错误。我可以在没有它的情况下捆绑它,但然后我得到类型错误。我有几个文件导入类型,但是,当我尝试运行browserify时,我得到导入Typescript @types导致browserify出错

错误:无法从'/ Users/lonniemcgill/Desktop/Projects/Typescript/ssadmin/development/assets中找到模块'chart.js'/TS /视图

我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代码识别出它是一个类型,因为INTE llisence不给我任何错误。没有导入它会工作,但我得到一堆类型的错误。我如何才能将browserify与包含的导入语句捆绑在一起?

这是我的这个任务的代码。

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")); 
}); 
+0

您是否正在通过脚本标记加载chart.js?将它作为一个模块加载(首选),或者创建一个'declare global'类型的填充。可能还有一些Browserify具体的方式来映射它。 –

+0

我已将所有的bower组件编译成vendor.js文件并将其加载到脚本标记中。 –

+0

那么这就是为什么 –

回答

0

由于您在价值位置使用导入(而不是单独在类型位置),typescript不会忽略它。这意味着发出的JavaScript有import(作为require转录)。

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

要修正此错误,你有几种选择:

  1. 安装chart.js之与NPM

    npm install --save chart.js  
    

    然后从你的供应商捆绑将其删除。

    这应该是首选的方法。这是使用Browserify或Webpack等工具的主要原因之一。

  2. 为chart.js创建一个全局声明,以便您不必导入它。

    import chartjs = require('chart.js'); 
    declare global { 
        const Chart = chartjs; 
    } 
    

    然后删除导入。

  3. 使用Browserify特定配置技术来告诉它,chart.js实际上映射到全局。

    这个答案说明如何:https://stackoverflow.com/a/23129051/1915893

相关问题