Webpack Karma Typescript——找不到模块

Question

我是 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；link 将导致）。您可以检查它并运行 npm run karma-test 进行运行ning 测试（或 npm run dev 以查看其他所有内容是否正确运行ning）。

错误：

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

karma.conf.ts:

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",
    }
  })
}

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"
  ]
}

webpack.base.conf

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
        }
      }
    ]
  }
}

webpack.test.conf

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

commons.ts

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}

总结

我尝试了几乎所有更改设置的组合。我尝试自己移动配置文件。我几乎整天都在寻找解决方案。我找不到任何帮助。但我认为我真的很接近运行ning 了。因此，我们将不胜感激。

Answer 1

看来有一个主要问题：

externals: [nodeExternals()],

删除此行后，代码运行正确。

//编辑：对于运行版本，请参阅：https://github.com/MoePad/javascript-template-project/tree/vue-js-typescript（我写这篇文章时的最新提交：46b0755）

Webpack Karma Typescript——找不到模块

Webpack Karma Typescript -- Module not found

typescript

karma-runner

karma-mocha

webpack

vuejs2

错误：