在WebPack Django和Vue.js項目中意外的關鍵字'導入'

我有一個簡單的項目，我使用Django，Webpack和Vue.js.當我加載時建立一個靜態包，看起來像我的包編譯不正確。我在JavaScript控制檯得到一個錯誤：在WebPack Django和Vue.js項目中意外的關鍵字'導入'

[Error] SyntaxError: Unexpected keyword 'import' 
    (anonymous function) (main-dd2bbbf09bf9a252a3c7.js:47)

我試圖讓我的webpack.config.js很簡單：

var path = require("path"); 
var webpack = require('webpack'); 
var BundleTracker = require('webpack-bundle-tracker'); 


module.exports = { 
    context: __dirname, 
    entry: './frontend/js/main', 
    output: { 
     path: path.resolve('./frontend/bundles/'), 
     filename: "[name]-[hash].js", 
    }, 

    plugins: [ 
    new BundleTracker({filename: './webpack-stats.json'}), 
    ], 

    resolve: { 
    extensions: ['', '.js', '.vue', '.json'], 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      } 
      // other vue-loader options go here 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ], 
    }, 
}

.babelrc看起來是這樣的：

{ 
    "presets": [ 
    ["env", { "modules": false }] 
    ] 
}

爲主。 js（最終被炸掉）很簡單：

import Vue from 'vue' 
import App from './App.vue' 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
})

來源

2017-09-12 mikebz

你有沒有嘗試刪除該文件夾node_modules並再次運行'NPM install'。 –

是的。沒有幫助 – mikebz

原來問題是webpack和相關庫的版本。將完整的解決方案完成並張貼在這裏：https://github.com/mikebz/djangovue

{ 
    "name": "djangovue", 
    "version": "0.0.0", 
    "description": "", 
    "main": "index.js", 
    "author": "Mike Borozdin", 
    "license": "MIT", 
    "scripts": { 
    "build": "cross-env NODE_ENV=prod webpack --progress --config webpack.config.js", 
    "watch": "cross-env NODE_ENV=dev webpack --progress --config webpack.config.js --watch" 
    }, 
    "devDependencies": { 
    "babel": "^6.23.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^6.1.2", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-es2015": "^6.24.1", 
    "cross-env": "^5.0.5", 
    "css-loader": "^0.28.7", 
    "file-loader": "^0.11.2", 
    "node-libs-browser": "^0.5.0", 
    "vue-loader": "^12.2.2", 
    "vue-template-compiler": "^2.4.2", 
    "webpack": "^3.5.6", 
    "webpack-bundle-tracker": "0.0.5", 
    "webpack-dev-server": "^2.8" 
    }, 
    "dependencies": { 
    "vue": "^2.4.2" 
    } 
}

來源

2017-09-15 06:21:47 mikebz

在WebPack Django和Vue.js項目中意外的關鍵字'導入'

回答

相關問題