Javascript Vue+；打字脚本+；网页包：模块构建失败-Can'；找不到vue.esm.js

我正在尝试使用typescript、webpack和vue.js构建一个基本项目。但是，当我从命令行运行

webpack

时，当前出现以下错误：

ERROR in ./node_modules/vue/dist/vue.esm.js
Module build failed: Error: Could not find file: 'c:\Users\user\Games\javascriptTimeGame\node_modules\vue\dist\vue.esm.js'.
    at getValidSourceFile (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89078:23)
    at Object.getEmitOutput (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89448:30)
    at getEmit (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:122:43)
    at successLoader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:42:11)
    at Object.loader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:29:12)

这很奇怪，因为它说找不到的文件肯定在那里

我的主脚本：

script.ts

，看起来像：

import Vue from 'vue'

function main(){
  let vueApp = new Vue({
    el: "#vue-test",
    data : {
      message: "Hello World"
    }
  });
}

main();

{
  "compileOnSave":  true,
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "../jsDist",
    "allowJs": true
  }
}

module.exports = {
    devtool: 'inline-source-map',
    entry: "./ts/script.ts",
    output: {
        filename: "bundle.js",
        path: `${__dirname}/jsDist`
    },
    module: {
        rules : [
            {
                loader: 'ts-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
    }
}

我的

tsconfig.json

看起来像：

import Vue from 'vue'

function main(){
  let vueApp = new Vue({
    el: "#vue-test",
    data : {
      message: "Hello World"
    }
  });
}

main();

{
  "compileOnSave":  true,
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "../jsDist",
    "allowJs": true
  }
}

module.exports = {
    devtool: 'inline-source-map',
    entry: "./ts/script.ts",
    output: {
        filename: "bundle.js",
        path: `${__dirname}/jsDist`
    },
    module: {
        rules : [
            {
                loader: 'ts-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
    }
}

我的

package.json

dev依赖项如下所示：

  "devDependencies": {
    "@types/vue": "^2.0.0",
    "http-server": "^0.10.0",
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.0.2",
    "ts-loader": "^2.3.3",
    "typescript": "^2.4.2",
    "vue": "^2.4.2",
    "watch": "^1.0.2",
    "webpack": "^3.5.5"
  }
}

我的

webpack.config.js

看起来像：

import Vue from 'vue'

function main(){
  let vueApp = new Vue({
    el: "#vue-test",
    data : {
      message: "Hello World"
    }
  });
}

main();

{
  "compileOnSave":  true,
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "../jsDist",
    "allowJs": true
  }
}

module.exports = {
    devtool: 'inline-source-map',
    entry: "./ts/script.ts",
    output: {
        filename: "bundle.js",
        path: `${__dirname}/jsDist`
    },
    module: {
        rules : [
            {
                loader: 'ts-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
    }
}

我注意到的一些事情可能会孤立这个问题

首先，如果我只是运行

tsc

直接使用typescript编译器构建源文件，那么它就可以完美地工作，不会出错。这表明网页包部分有问题

其次，如果我将

script.ts

更改为：

import Vue from 'vue'

function main(){
  console.log("Harmless");
}

main();

然后webpack会毫不费力地构建它。这表明webpack似乎并不是在顶级导入方面有问题，而是在Vue的使用方面有问题

最后，如果我修改我的webpack.config.js，使ts loader具有额外的选项

transpileOnly:true

，那么它似乎也可以毫不费力地构建（但我当然不想这样做，因为这样一来，我就失去了使用typescript的理由！）

你知道是什么导致了这个错误吗？

试试这个：

import Vue from 'vue';

let vueApp = {};

if (document.querySelector('#authorities-container')) {
  vueApp = new Vue({
    el: "#vue-test",
    data : {
      message: "Hello World"
    }
  });
};

export {vueApp}