vue.js与vue-multilanguage我的webpack编译没有被翻译正确
我的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/ } ] } }
因此，在Chromium / Chrome和ubuntu下build.js中的错误和代码 ：
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}' } })
任何推荐的教程？ 任何想法？
当我在build.js中replace行module.exports = { MultiLanguage: MultiLanguage}; 错误不会发生
您的问题与您的导入链接。
vue-multilanguage.js不是由其作者预先编译的（这很less见，通常库包含一个dist文件，可以使用…），并且在你的node_modules文件夹中，它不会从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' 'babel-loader'取代了'babel' 'babel-loader' ，以避免旧的软件包出现一些错误。 看到这里 。
此外，你可以（也可能应该），如评论中所述，通过这种方式导入vue。
import Vue from 'vue';
附注 ：
根据他们的package.json ， 应该有一个文件准备在他们的库中使用，位于dist/vue-multilanguage.js 。 但他们奇怪地将他们的dist文件夹添加到他们的.npmignore文件，所以它不包括在内。 这可能是一个错误。 我会在他们的github上发布一个问题。 一旦它得到纠正，如果你更新你的软件包，你应该能够像这样简单地导入vue-multi（不需要为你的webpackconfiguration添加任何exception）：
import MultiLanguage from 'vue-multilanguage'
我会使用下一个import：
import Vue from './vue'; import MultiLanguage from './vue-multilanguage';