2016-04-02 2 views
4

Прежде всего, я изо всех сил пытаюсь задать правильный вопрос. Я чувствую, что пропустил или смешал некоторые понятия относительно компилятора TypeScript, нового синтаксиса модуля ES2015 (ES6) и загрузчиков модулей.Как импортировать jQuery модуль npm в TypeScript 1.8

Я пытаюсь импортировать модуль jquery, установленный npm, используя синтаксис модуля ES2015. Машинопись должна передать ее ES5.

Я получаю сообщение об ошибке при открытии index.html.

system-polyfills.src.js:1276 Error: SyntaxError: Unexpected token < 
Evaluating http://localhost:3000/jquery 
Error loading http://localhost:3000/app/main.js 

index.html

<html> 
    <head> 
    <title>Bare TypeScript</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/jquery/dist/jquery.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('app/main') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <div>Loading...</div> 
    </body> 
</html> 
  • Я не уверен, если <script src="node_modules/jquery/dist/jquery.js"></script> необходимо.
  • Как получилось, что импорт B работает нормально, когда console.log($) прокомментирован ? Импорт jQuery тоже должен работать?
  • Возможно, что проблема связана с модулями commonjs npm с systemjs?

main.ts

import * as $ from 'jquery' 
import B from './app.b' 

console.log("Monkey"); 
let b = new B(); 
console.log($); 

Как настроить TSC для работы с синтаксисом модуля ES2015? Используется TypeScript 1.8.

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

package.json

"dependencies": { 
    "es6-shim": "^0.35.0", 
    "jquery": "^2.2.2", 
    "systemjs": "0.19.25" 
    }, 

typings.json

{ 
    "ambientDependencies": { 
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd", 
    "jquery": "registry:dt/jquery#1.10.0+20160316155526" 
    } 
} 

ответ

2

Вы пытаетесь загрузить JQuery в качестве systemjs модуля, но AMD. Кроме того, если у вас нет экспорта по умолчанию на вашем app.b, то машинописный компилятор выдает ошибку. Проверяли ли вы какие-либо ошибки компилятора?

В этом Github есть некоторые сведения о загрузке jQuery с использованием синтаксиса импорта ES6.

+0

Я не получаю ошибки компилятора. При комментировании текста консоли console.log ($) '" обезьяна выписывается на консоль. Thx для ссылки GitHub. – Fosna

Смежные вопросы