使用 Vue 构建打字稿代码时 Webpack 构建错误

Question

我正在将我的项目（基于 vue.js）从 Javascript 转换为 Typescript，当我尝试使用修改后的 webpack 配置和代码构建我的项目时，我只是无法导入 vue 包。

我的 index.js：

import Vue from "vue";
import store from './vuex/store';
import app from './app.vue';

let v = new Vue({
  el: '#eme',
  store,
  components: {app}
}
);

我的 webpack 配置：

'use strict'
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const appPkg = require('../app/package')

const postcss = [
  require('postcss-nested'),
  require('postcss-import')(),
  require('postcss-simple-vars'),
  require('postcss-mixins'),
  require('autoprefixer')({
    browsers: ['last 2 Chrome versions']
  })
]

module.exports = {
  entry: {
    app: ['./src/index.ts'],
    vendor: ['vue', 'vuex']
  },
  output: {
    path: process.cwd() + '/app/dist',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue', '.css', '.json', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      src: path.join(__dirname, '../src'),
      utils: path.join(__dirname, '../src/utils'),
      components: path.join(__dirname, '../src/components'),
      css: path.join(__dirname, '../src/css'),
      directives: path.join(__dirname, '../src/directives'),
      store: path.join(__dirname, '../src/vuex/store')
    }
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: [/node_modules/]
      },
      {
        test: /\.vue$/,
        loaders: ['vue']
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader!postcss-loader'
        )
      },
      {
        test: /\.json$/,
        loaders: ['json']
      },
      {
        test: /\.svg$/,
        loaders: ['svg-inline']
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
    ]
  },
  babel: {
    presets: ['es2015', 'stage-1'],
    plugins: ['transform-runtime']
  },
  vue: {
    autoprefixer: false,
    postcss,
    loaders: {
      css: ExtractTextPlugin.extract(
        'vue-style-loader',
        'css-loader?sourceMap'
      )
    }
  },
  postcss,
  target: 'electron-renderer',
  plugins: [
    new webpack.ExternalsPlugin('commonjs2', [
      './vendor/markdown-it-katex',
      '../package.json'
    ].concat(Object.keys(appPkg.dependencies))),
    new ExtractTextPlugin('[name].css'),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.js'
    })
  ]
}

const webpack = require('webpack')
const config = require('./webpack.config')

config.plugins = config.plugins.concat([
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compressor: {
      warnings: false
    },
    //comments: false
  }),
  new webpack.DefinePlugin({
    '__DEV__': false,
    'process.env.NODE_ENV': JSON.stringify('production')
  })
])

但是当我尝试构建这个项目时，出现以下错误：

"app.js from UglifyJs\nSyntaxError: Unexpected token: name (Vue) [./src/index.ts:1,7]"

我不知道如何解决它。我的环境的更多信息：

ts-loader: 3.5.1
vue: 2.6.10
webpack: 1.15.0

Answer 1

我已经迁移到 webpack 2，这似乎是由于 webpack 1 中对 ts-loader 的支持不好造成的。我现在很好。 :D