我正在尝试使用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'
},
}
}
我注意到的一些事情可能会隔离问题。
首先,如果我只是运行tsc
来使用typescript编译器直接构建我的源文件,那么它可以正常运行而不会出错。这表明webpack部分存在问题。
其次,如果我改变script.ts
只是:
import Vue from 'vue'
function main(){
console.log("Harmless");
}
main();
然后webpack毫不费力地构建它。这表明它不是webpack似乎有问题的顶级导入,而是Vue的用途。
最后,如果我改变我的webpack.config.js,使ts-loader有额外的选项transpileOnly: true
,那么它似乎也没有大惊小怪(但当然我不想这样做,因为那时我首先失去了使用打字稿的理由!)
可能导致此错误的任何想法?
答案 0 :(得分:0)
尝试一下:
import Vue from 'vue';
let vueApp = {};
if (document.querySelector('#authorities-container')) {
vueApp = new Vue({
el: "#vue-test",
data : {
message: "Hello World"
}
});
};
export {vueApp}