我正在尝试使用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();
我的
tsconfig.json
如下:{
"compileOnSave": true,
"compilerOptions": {
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"strict": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"outDir": "../jsDist",
"allowJs": true
}
}
我的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
如下所示: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'
},
}
}
我注意到一些可能会导致问题的事情。
首先,如果我直接使用TypeScript编译器运行tsc
来构建我的源文件,则可以完美地工作而没有错误。这表明特定于webpack的某些地方出了问题。
其次,如果我将script.ts
更改为:
import Vue from 'vue'
function main(){
console.log("Harmless");
}
main();
然后webpack无需麻烦即可构建它。这表明Webpack似乎并不关心顶级导入,而是特别关注Vue的使用。
最后,如果我更改我的webpack.config.js,使得ts-loader具有额外选项
transpileOnly:true
,那么它也似乎可以顺利构建(但我当然不想这样做,因为这样我失去了使用typescript的原因!)有什么想法可能会导致这个错误吗?