vue.js 和 vue-multilanguage 我的 webpack 编译没有正确翻译

Question

我的 webpack 编译没有转译成正确的 JS。它写道

exports default MultiLanguage 代替 module.exports = { MultiLanguage: MultiLanguage};

我的.bablerc

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"]
}

我的 package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "description": "My app",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "vue": "^2.4.2",
    "vue-multilanguage": "^2.1.1"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-runtime": "^6.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.1.2",
    "babel-runtime": "^5.8.0",
    "webpack": "^1.15.0"
  },
  "author": "You"
}

我的 webpack.config.js

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {

        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }
    ]
  }
}

因此在 build.js 中出现错误和代码 在 Chromium/Chrome 和 ubuntu 中：

Uncaught SyntaxError: Unexpected token export

在 Firefox 中：

SyntaxError: export declarations may only appear at top level of a module
    export default MultiLanguage

这里还有vue代码（main.js）：

import Vue from 'vue/dist/vue.js'
import MultiLanguage from 'vue-multilanguage/src/vue-multilanguage.js'

Vue.use(MultiLanguage, {
    default: 'en',
    en: {
        hi: 'Hello',
        welcome: 'Welcome, {name}'
    },
    pt: {
        hi: 'Ola',
        welcome: 'Bem-vindo, {name}'
    }
})

有什么推荐的教程吗？有什么想法吗？

当我用 module.exports = { MultiLanguage: MultiLanguage}; 替换 build.js 中的行时，不会发生错误

Answer 1

您的问题与您的导入有关。

vue-multilanguage.js 不是由其作者提供预编译的（这种情况很少见，通常库包含一个可以使用的 dist 文件......）并且因为它位于您的 node_modules 文件夹中，所以它不是从ES6 到 ES5 也可以通过你的 babel 加载器来实现。您需要在 webpack.config.js 中添加一个例外。

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {

        test: /\.js$/,
        loader: 'babel-loader',
        // exclude everything from node_modules, except vue-multilanguage
        exclude: /node_modules(?![\\/]vue-multilanguage[\\/])/
      }
    ]
  }
}

不直接相关，但不是说我也用'babel-loader' 替换了'babel'，以避免旧包的一些错误。 See here.

此外，您可以（并且您可能应该）如 cmets 中所述，以这种方式导入 vue。

import Vue from 'vue';

旁注：

根据他们的package.json，应该有一个可以在他们的库中使用的文件，位于dist/vue-multilanguage.js。但奇怪的是，他们将 dist 文件夹添加到了他们的 .npmignore 文件中，因此不包括在内。这可能是一个错误。我会在他们的 github 上发布一个问题。一旦它被纠正，并且如果你更新你的包，你应该能够像这样简单地导入 vue-multi（不向你的 webpack 配置添加任何异常）：

import MultiLanguage from 'vue-multilanguage'

Answer 2

我会使用下一个导入：

import Vue from './vue';
import MultiLanguage from './vue-multilanguage';