node.js - vue.js 和 vue-multilingual 我的 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

在火狐浏览器中:

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-multilingual.js 并未由其作者提供预编译(这种情况很少见，通常库包含一个可供使用的 dist 文件...)，并且由于它位于您的 node_modules 文件夹中，因此您的 babel 加载器也不会将其从 ES6 转换为 ES5。您需要在 webpack.config.js 中添加异常(exception)。

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 .

此外，您可以(并且您可能应该)如评论中所述，以这种方式导入 vue。

import Vue from 'vue';

旁注:

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

import MultiLanguage from 'vue-multilanguage'