Typescript @typesをインポートするとbrowserifyエラーが発生する

Question

import文でgulpでbrowserifyを実行するとエラーが発生します。私はそれなしでバンドルすることができますが、その後私はタイプエラーを取得します。しかし、私は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は私にエラーを与えていません。インポートがなければ動作しますが、タイプエラーが発生します。どのようにしてimportify文をバンドルするようにbrowserifyを含めることができますか？

ここにそのタスクの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

タイプインポジションではなく、値の取り込み位置を使用しているため、タイプスクリプトはそれを削除しません。つまり、送信されたJavaScriptの文字列はimport（require）となります。

Browserifyはこれをnode_modulesからインポートしようとします。

がエラーを修正するには、いくつかのオプションがあります。

1. はその後、NPM

   npm install --save chart.js  
   

   でchart.jsをインストールベンダーのバンドルから削除します。

   これが望ましいアプローチです。これは、BrowserifyやWebpackのようなツールを使用する主な理由の1つです。

2. chart.jsのグローバル宣言を作成してインポートする必要はありません。

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

   次に、インポートを削除します。

3. Browserify固有の設定手法を使用して、chart.jsが実際にグローバルにマップすることを伝えます。

   この答えは方法について説明します。私はtypescriptです文書で答えを見つけて興味を持っている人のためにhttps://stackoverflow.com/a/23129051/1915893

Answer 2

。 https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.htmlUse /// <reference types="chart.js" />または@typeが何であっても。それはtypescriptと互換性があるようにインポートの代わりに。