我对JavaScript和TypeScript生态系统相对较新，并尝试建立一个良好的模板项目，这将使我快速开始新项目。我也想了解一切是如何运作的，所以我不想只使用另一个模板项目（我无论如何都找不到我的需求）。
我使用的是Vue.js 2，webpack 3，TypeScript 2，karma，mocha和chai。 我的模板项目除测试外无效。
你可以在这里找到整个项目：https://github.com/MoePad/javascript-template-project/tree/karma-mocha-hell（分支karma-mocha-hell;这个链接将导致）。您可以将其签出并运行npm run karma-test以运行测试（或npm run dev以查看其他所有内容是否正常运行。）
ERROR in ./src/main/vue-setup.d.ts
Module parse failed: ~/test/src/main/vue-setup.d.ts Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
| declare module '*.vue' {
| import Vue from 'vue'
| export default Vue
ERROR in ./src/main/App.vue
Module parse failed: ~/test/src/main/App.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div>
| <h1>My new app: {{message}}</h1>
等等。这导致我假设我的加载器出了问题（如错误信息中所示）。
（只有与此问题相关的事情;即省略.gitignore等）：
config/karma/karma.conf.js
config/karma/index.js
config/webpack/[WEBPACK CONFIGS]
config/commons.ts
src/main/[PRODUCTION CODE]
src/test/[TEST CODE]
tsconfig.json
package.json
var testConfig = require('../webpack/webpack.test.conf')
module.exports = function(config) {
config.set({
basePath: '../..',
browsers: ['Chrome'],
exclude: ['node_modules'],
frameworks: ['mocha', 'karma-typescript'],
// this is the entry file for all our tests.
files: [
{pattern: 'src/test/**/*.ktest0.ts', watch: false},
{pattern: 'src/main/**/*.ts', watch: false},
{pattern: 'src/main/**/*.vue', watch: false},
{pattern: './config/karma/index.js', watched: false}
],
preprocessors: {
'./config/karma/index.js': ['coverage', 'webpack', 'sourcemap'],
//'./src/**/*.ts': ['coverage', 'webpack', 'sourcemap']
'./src/**/*.ts': ['webpack', 'sourcemap'],
'./src/**/*.vue': ['webpack', 'sourcemap']
// '*.ts': ['webpack']
},
webpack: {
module: testConfig.module,
resolve: testConfig.resolve
},
webpackMiddleware: {
noInfo: true
},
singleRun: true,
//logLevel: 'debug',
reporters: ['progress'],
colors: true,
port: 9090,
karmaTypescriptConfig: {
compilerOptions: {
module: "commonjs"
},
tsconfig: "./tsconfig.json",
}
})
}
{
"compileOnSave": false,
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"es2015",
"es2016"
],
"jsx": "preserve",
"target": "es2016",
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"skipLibCheck": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*",
"./config/commons.d.ts"
]
}
import * as HtmlWebpackPlugin from 'html-webpack-plugin'
import commons from '../commons'
import * as Dashboard from 'webpack-dashboard/plugin'
export default {
entry: {
app: commons.resolve('src/main/main.ts')
},
resolve: {
extensions: ['.js', '.ts', '.vue', '.json'],
alias: {
'@': commons.resolve('src/main')
}
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/main/index.html',
inject: true
}),
new Dashboard()
],
module: {
rules: [
{
test: /\.ts$/,
include: [commons.resolve('src')/*, commons.resolve('config')*/],
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.vue$/,
include: [commons.resolve('src')],
loader: 'vue-loader',
options: {
esModule: true
}
}
]
}
}
import * as merge from 'webpack-merge'
//import baseConfig from './webpack.base.conf'
import baseConfig from './webpack.base.conf'
import commons from '../commons'
import * as nodeExternals from 'webpack-node-externals'
import * as webpack from 'webpack'
//baseConfig.entry = undefined
//baseConfig.plugins = undefined
const devConfig = merge(baseConfig, {
target: 'web',
devtool: 'inline-source-map',
// resolve: {
// alias: {
// '--': commons.resolve('src/main/test')
// }
// },
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"test"'
}
})
],
externals: [nodeExternals()],
output: {
path: commons.resolve('src/main'),
filename: 'bundle.js'
}
})
export default devConfig
import * as open from 'open'
import * as path from 'path'
declare var __dirname: any
export function resolve(dir: any) {
return path.join(__dirname, '..', dir)
}
export default {resolve, open}
我尝试了几乎所有更改设置的组合。我尝试自己移动配置文件。我差不多整整一天都在寻找解决方案。我找不到任何帮助。但是我觉得我真的很接近这个东西。所以任何帮助都表示赞赏。
答案 0 :(得分：0)
看起来有一个主要问题：
java.lang.RuntimeException: Unable to start receiver java.lang.NullPointerException: Attempt to invoke virtual method 'int java.util.ArrayList.size()' on a null object reference
at android.app.ActivityThread.handleReceiver(ActivityThread.java:3018)
at android.app.ActivityThread.-wrap18(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1544)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6077)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)
Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'int java.util.ArrayList.size()' on a null object reference
at com.example.user1.testtaskmanager.MyScheduledReceiver.onReceive(MyScheduledReceiver.java:25)
at android.app.ActivityThread.handleReceiver(ActivityThread.java:3011)
at android.app.ActivityThread.-wrap18(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1544)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6077)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)
删除此行后，代码运行正常。
//编辑：对于正在运行的版本，请参阅：https://github.com/MoePad/javascript-template-project/tree/vue-js-typescript（我写这篇文章的最新提交：46b0755）