带有动态导入的打字稿中的错误答案

【问题标题】：Errors in typescript with dynamic import带有动态导入的打字稿中的错误
【发布时间】：2018-09-04 21:11:22
【问题描述】：

我收到以下错误。

ERROR in [at-loader] ./ClientApp/boot.ts:7:23 
    TS1109: Expression expected.
ERROR in [at-loader] ./ClientApp/boot.ts:7:29 
    TS1134: Variable declaration expected.
ERROR in [at-loader] ./ClientApp/boot.ts:8:25 
    TS1109: Expression expected.
ERROR in [at-loader] ./ClientApp/boot.ts:8:31 
    TS1134: Variable declaration expected.

我有以下 boot.ts 文件。

import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Counter = () => import('./components/counter/counter');
const FetchData = () => import('./components/fetchdata/fetchdata');

const routes = [
    { path: '/', component: require('./components/home/home.vue.html') },
    { path: '/counter', component: Counter },
    { path: '/fetchdata', component: FetchData }
];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html'))
});

我的 tsconfig.json 文件如下所示。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "skipDefaultLibCheck": true,
    "strict": true,
    "importHelpers": true,
    "lib": [
      "es5",
      "es2015.promise"
  ],
    "types": ["webpack-env"]
  },
  "exclude": [
      "bin",
      "node_modules"
  ]
}

我想实现以下目标。我正在使用 webpack。所以如果需要，我可以在这里发帖。

https://router.vuejs.org/en/advanced/lazy-loading.html

【问题讨论】：

您使用的是什么版本的 Typescript？ 2.4 之前不支持动态导入语法。
对不起。我对此很陌生。但我的 package.json 看起来像这样。 “打字稿”：“^2.2.1”，
如果你运行npm list typescript，输出是什么？
嘿，伙计。我试过 npm update --save。现在是新错误。 TS2304：找不到名称“节点”。
你的命令就会显示出来。 `-- typescript@2.7.2

标签： typescript webpack vue.js

【解决方案1】：

只有 Typescript 2.4+ 版本才支持动态导入语法。最有可能的解决方法是您需要升级您的 Typescript 版本。

使用以下内容更新 Typescript 的版本：

npm update --save-dev typescript

或者，如果您使用的是全局安装版本：

npm update -g typescript

您可以在之后运行npm list typescript（或npm list -g typescript）以确保它成功。

【讨论】：