Как мне настроить index.html с помощью Systemj для использования существующего пакета?

У меня есть небольшое приложение типа helloworld TypeScript, которое использует структуру aurelia.io из файла пакета и настроено с помощью SystemJS. Когда я запускаю мое приложение, скомпилированную версию машинописи моего helloworld.ts выдает ошибку, которая гласит:Как мне настроить index.html с помощью Systemj для использования существующего пакета?

TypeError: define is not a function at System.register.execute 
(http://localhost:9000/src/helloworld.js!eval:31:13) at t ...

Кажется мне, как функция define находится в объявленном SystemJS, поэтому, возможно, это проблема конфигурации. Структура, кажется, загружается отлично, но я нахожу довольно странным, что функция systemjs не распознается.

Вот моя иерархия проектов и мои файлы конфигурации. Что я делаю не так?

Моя структура папок выглядит следующим образом:

./jspm_packages/... 

./scripts/aurelia/aulrelia-bundle.js 

./src/main.ts 
./src/main.js (compiled ts) 
./src/app.ts 
./src/app.js (compiled ts) 
./src/helloworld.ts 
./src/helloworld.js (compiled ts) 

./index.html 
./config.js

Я установил JSPM, и следовали инструкциям, чтобы создать config.js файлов по умолчанию. Единственный вариант, который я изменил по умолчанию, - это использовать babel в качестве транспилятора.

My config.js выглядит следующим образом:

System.config({ 
    "baseURL": "/", 
    "transpiler": "babel", 
    "babelOptions": { 
    "optional": [ 
     "runtime" 
    ] 
    }, 
    "paths": { 
    "*": "*.js", 
    "github:*": "jspm_packages/github/*.js", 
    "npm:*": "jspm_packages/npm/*.js" 
    } 
}); 

System.config({ 
    "map": { 
    "babel": "npm:[email protected]", 
    "babel-runtime": "npm:[email protected]", 
    "core-js": "npm:[email protected]", 
    "github:jspm/[email protected]": { 
     "process": "npm:[email protected]" 
    }, 
    "npm:[email protected]": { 
     "process": "github:jspm/[email protected]" 
    }, 
    "npm:[email protected]": { 
     "fs": "github:jspm/[email protected]", 
     "process": "github:jspm/[email protected]", 
     "systemjs-json": "github:systemjs/[email protected]" 
    } 
    } 
});

Мой index.html выглядит следующим образом:

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Hello World</title> 

    <link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="styles/fontawesome/css/font-awesome.min.css"> 
    <link href="styles/styles.css" rel="stylesheet" /> 
</head> 

<body aurelia-app> 
    <div class="splash"> 
     <div class="message">Welcome...</div> 
    </div> 

    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <script> 
    System.config({ 
     "paths": { 
     "*": "*.js" 
     } 
    }); 
    //Project uses bundles 
    System.bundles["scripts/aurelia/aurelia-bundle"]=["aurelia-bootstrapper"]; 
    System.import('aurelia-bootstrapper'); 
    </script> 
</body> 
</html>

Мои helloword.ts выглядит следующим образом:

import {bindable} from 'aurelia-framework'; 

export class HelloWorld{ 

    @bindable hello="Hello!"; 

}

Полная ошибка :

TypeError: define is not a function at System.register.execute 
(http://localhost:9000/src/helloworld.js!eval:31:13) at t 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19798) at v 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:20180) at u 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19856) at s 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19737) at 
http://localhost:9000/jspm_packages/es6-module-loader.js:7:22064 at O 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:7439) 
at K 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:7071) at y.7.y.when 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:10745) at v.7.v.run 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:9781) at a.3.a._drain 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:1740) 
at 3.a.drain 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:1394) at MutationObserver.b 
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:3302)(anonymous function) @ aurelia-bundle.js:16334run @ aurelia-bundle.js:1602(anonymous 
function) @ aurelia-bundle.js:1613module.exports @ aurelia-bundle.js:2906queue.(anonymous function) @ aurelia-bundle.js:3416run @ aurelia-bundle.js:3404listner @ aurelia-bundle.js:3408

источник

2015-06-10 bedo

вы пробовали трейсер вместо Бабеля? Я еще не использую TypeScript, но недавно прочитал. –

Оказывается, это проблема транспиляции. Спасибо. – bedo

@MattMcCabe Они оба делают то же самое, только Вавилон (6to5) был вокруг дольше –

Вы должны разрешить jspm создать файл config.js и не изменять его вручную. Затем вы можете использовать aurelia-cli автоматически создать пакет на основе, какие пакеты вы загрузили через jspm что-то вроде:

aureliafile.js

var bundleConfig = { 
    js: { 
     "scripts/aurelia-bundle-latest": { 
      modules: [ 
       'github:aurelia/*' 
      ], 
      options: { 
       inject: true, 
       minify: true 
      } 
     } 
    } 
};

Это будет автоматически изменять config.js включать файлы, необходимые для и где их найти во время выполнения при запуске aurelia bundle ---force (сила заключается в том, чтобы перезаписать предыдущий пакет). После этого, ваш index.html будет выглядеть примерно так:

Index.html

<body aurelia-app="path/to/main"> 
    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <script> 
     System.import('aurelia-bootstrapper'); 
    </script> 
</body>

источник

2015-08-24 19:38:05

Transpiler пытался интерпретировать комментарий, который у меня был в одном из моих исходных файлов в виде /* ... */, который вызывал эту ошибку. Это происходило, несмотря на то, что флаг пропускал комментарии.

источник

2015-06-15 18:33:13 bedo

Как мне настроить index.html с помощью Systemj для использования существующего пакета?

ответ

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