解决导出未定义错误

时间:2017-06-09 19:20:21

标签: javascript typescript ecmascript-6 amd tsconfig

我正在使用构建网页。它的设置方式是html页面包含一个脚本,它是Typescript文件的转换版本。我这样做是为了利用Typescript中的import语句以及强类型。我遇到的问题是我似乎无法正确地传递Typescript。我尝试使用作为模块选项,但我遇到了各种错误。我知道我在这里错过了一些如何正确地转换为Javascript的东西,但我不确定我错过了什么。我可以使用哪个模块来转换Typescript代码,以便将其包含在html页面中?

错误

  • 导出未定义(commonjs)
  • define未定义(amd)
  • 意外令牌导入(es2015)

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/WebResources/ccseq_/Content/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/ProductEvaluation.css" />
</head>
<body>
    <div id="product-eval-areas" >
        <div v-if="allowReviewerReview" class="list-group">
            <div class="list-group-item" v-for="area in areas">
                {{area.EvaluationArea}}<star-rating v-model="area.ProductEvaluationScore" v-bind:increment="1" v-bind:star-size="20"></star-rating>
            </div>
        </div>        

        <button v-if="allowReviewerReview" class="btn btn-sm" v-on:click="submitEval">Submit Evaluation</button>

        <p v-if="alert">{{alertMessage}}</p>
    </div>    

    <script src="/WebResources/ccseq_/Scripts/jquery3.1.1.js"></script>
    <script src="/WebResources/ccseq_bootstrap"></script>
    <script src="../../Scripts/papaparse.js"></script>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../js/ProductEvaluationReview.js"></script>
</body>
</html>

打字稿

我为了简洁而排除了一些功能

"use strict";

import { Constants } from "../../CCSEQ/Constants";
import { WebAPI } from "../../CCSEQ/WebAPI";
import { Xrm } from "../../CCSEQ/Xrm";
import * as Model from "../../CCSEQ/Model";
import { Helpers } from "../../CCSEQ/Helpers";
import * as Vue from "vue";
import * as StarRating from "vue-star-rating";

let currentProductEvaluation = new Model.ProductEvaluation();

Vue.component('star-rating', StarRating.default);

let prodEvalAreas = new Vue({
    el: '#product-eval-areas',
    data: {
        //data
    },
    computed: {
        // Computed stuff
    },
    methods: {
        // Methods
    }
});

$(document).ready(function () {
    PopulatePage();
});

function PopulatePage() {
    //Do stuff to populate page

}
}

tsconfig

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "module": "umd",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "./WebResources/js/lib",
    "./WebResources/js/main"
  ],
  "include": [
    "./CCSEQ",
    "./WebResources/js"
  ]
}

0 个答案:

没有答案