1

従う前に、環境の概要を説明します

  1. IDE: Webstorm、最新リリース
  2. es6 がインストールされ、有効になっている
  3. バベルがインストールされています。babelファイルウォッチャーがインストールされています
  4. タイプスクリプトがインストールされています

私がやろうとしているのは、モジュールを作成してからインポートして使用することですが、常に異なるエラーが発生します。以下は、私が持っているファイルとその内容のリストです

  1. スタッフ

    export class Staf {
StaffNo: number;
Username: string;
Firstname: string;
Lastname: string;
Password: string;
Type: string;
Program: array<string>;
}

Webstorm は Staf という単語に下線を付け、次のエラーを表示します。

cannot compile external modules unless the '--module' flag is provided

  1. login.js

    import Staff from 'Staf';

$(document).ready(function(){
console.log('hello');

var staff = [];

$.getJSON('data/staff.json', function(data) {
$.each(data, function (i, record) {
staff.push(record);
});
});

console.log(staff);

$('.btn').click(function(){
var name = $('input[aria-describedby=basic-addon-username]').val();
var pass = $('input[aria-describedby=basic-addon-passwor]').val();

$.each(staff, function(i, data){
if( (data.Username == name || data.Firstname == name) && data.Password == pass){
console.log("hi");
$($('.input-group')).addClass('has-success')
window.location.href = "./actions.html";
}
})

$($('.input-group')).addClass('has-error');
$('.help-block').toggle();
//$('.bg-danger').show();

})

})

  2. ログイン.html

    <!DOCTYPE html>
<html>
<head>
 <title>STARS - Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--<script src="node_modules/babel-browser/browser.js"></script>-->
<script src="js/login.js"></script>
<script src="node_modules/systemjs/node_modules/es6-module-loader/src/system.js"></script>
<script>
    System.config({
        baseURL: 'node_modules/babel-browser/browser.js',
        // or 'traceur' or 'typescript'
        transpiler: 'babel',
        // or traceurOptions or typescriptOptions
        babelOptions: {

        }
    });

    // loads /app/main.js
    System.import('lgoin.js');

</script>
</head>

 <body>

 </body>
</html>

それを実行しようとすると、3つのエラーが発生します

  1. Uncaught SyntaxError: Unexpected token import
  2. Uncaught ReferenceError: Loader is not defined
  3. Uncaught TypeError: Cannot read property 'config' of undefined

今、私はbabel、babel-cli、およびbabel-preset-es2015をインストールしようとしましたが、この問題を解決するためのブレークスルーにつながることに注意してください

4

1 に答える 1

1

「--module」フラグが指定されていない限り、外部モジュールをコンパイルできません

typescript ターゲットが ES6 に設定されていない可能性が非常に高い

ES6tsconfig.jsonに設定してファイルを作成します。target

Webstorm -> 設定 -> 言語 -> Typescript で、use tsconfig.jsonファイルを選択します

編集：コメントを参照

staf.tsする必要があります

class Staf {
...
}

export default Staf

login.jsする必要があります

import Staf from './staf'

(「./staf」に注意してください)

于 2015-11-14T16:42:28.403 に答える