"Importuj" i "eksportuj" mogą pojawiać się tylko na najwyższym poziomie.

Question

Używam pakietu internetowego z vuejs. Webpack robi swoje, ale kiedy patrzę na wyjściowy plik app.js, daje mi ten błąd.

„import” i „eksport” może pojawić się tylko na najwyższym poziomie

jestem przy założeniu, że to problem z Babel nie konwersji kodu? Ponieważ dostaję to w przeglądarce podczas przeglądania aplikacji.

Nieoczekiwany token import

Oto moje entry.js dla mojego vuejs zastosowania:

/*jshint esversion: 6 */ 
import Vue from 'vue'; 
import App from './App.vue'; 
import VueRouter from 'vue-router'; 
Vue.use(VueRouter); 
require('./css/style.scss'); 

// Export the vue router 
export var router = new VueRouter({ 
    hashbang: false, 
    root: '/' 
    // history: true 
}); 

// Set up routing and match routes to components 
router.map({ 
    '/': { 
    component: require('./components/home/Home.vue') 
    } 
}); 

// Redirect to the home route if any routes are unmatched 
router.redirect({ 
    '*': '/' 
}); 

// Start the app on the #app div 
router.start(App, '#app'); 

Oto mój webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    entry: './src/entry.js', 
    output: { 
     filename: './public/js/app.js' 
    }, 
    devtool: 'source-map', 
    plugins: [ 
    new ExtractTextPlugin('./public/css/style.css') 
    ], 
    module: { 
    preLoaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'jshint-loader' 
    }], 
    loaders: [{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract(
      'style', 
      'css!sass' 
     ), 
    }, 
    { 
     test: /\.vue$/, 
     loader: 'vue' 
    }, 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     include: [ 
      path.resolve(__dirname, "src/services"), 
     ], 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015'] 
     } 
    }] 
    } 
}; 

Oto mój plik packages.json:

{ 
    "name": "test-webpack", 
    "version": "1.0.0", 
    "description": "Myapp", 
    "main": "entry.js", 
    "scripts": { 
    "watch": "webpack-dev-server --host $IP --port $PORT --hot --inline --config webpack.config.js", 
    "dev": "webpack", 
    "build": "" 
    }, 
    "author": "Dev", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.9.1", 
    "babel-loader": "^6.2.4", 
    "babel-plugin-transform-class-properties": "^6.10.2", 
    "babel-plugin-transform-runtime": "^6.9.0", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-runtime": "^6.9.2", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "jshint": "^2.9.2", 
    "jshint-loader": "^0.8.3", 
    "node-sass": "^3.8.0", 
    "path": "^0.12.7", 
    "sass-loader": "^3.2.0", 
    "style-loader": "^0.13.1", 
    "vue-hot-reload-api": "^1.3.2", 
    "vue-html-loader": "^1.2.2", 
    "vue-loader": "^8.5.2", 
    "vue-style-loader": "^1.0.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "dependencies": { 
    "vue": "^1.0.25", 
    "vue-router": "^0.7.13" 
    } 
} 

Answer 1

'import' i 'eksport' może pojawić się tylko na najwyższym poziomie

Oznacza to, że WebPack jest łączenie się non-transpiled kod ES6, dlatego są znalezione te stwierdzenia import/export. babel-loader nie może zatem być transponowaniem tego, czego oczekujesz.

Jeśli po prostu usunąć include i exclude reguły z jej ładowarki config, domyślne zachowanie transpiling wszystko oprócz tego, co znajduje się w node_modules będzie kopać. Z jakiegoś powodu lub innego, obecne przepisy powodują niektóre/wszystkie pliki do pominięcia .

module.exports = { 
    entry: './src/entry.js', 
    output: { 
    filename: './public/js/app.js' 
    }, 
    devtool: 'source-map', 
    plugins: [ 
    new ExtractTextPlugin('./public/css/style.css') 
    ], 
    module: { 
    preLoaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'jshint-loader' 
    }], 
    loaders: [{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract(
     'style', 
     'css!sass' 
    ), 
    }, 
    { 
     test: /\.vue$/, 
     loader: 'vue' 
    }, 
    { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['es2015'] 
     } 
    }] 
    } 
}; 

Answer 2

Upewnij się, że masz plik .babelrc, który deklaruje, co Babel powinien transponować. Spędziłem około 30 minut próbując ustalić dokładnie ten błąd. Po skopiowaniu kilku plików do nowego folderu i stwierdzeniu, że nie skopiowałem pliku .babelrc, ponieważ został on ukryty.

{ 
    "presets": "es2015" 
} 

lub coś wzdłuż tych linii jest to, czego szukasz wewnątrz pliku .babelrc

Answer 3

Używam WebPACK 2.2.0 do mojego React pakiet modułów JS.

Wystąpił podobny problem podczas importowania modułów w moim głównym pliku app.js.

Po 30 minutach headbangingu zaktualizowałem RegEx do testowania typów plików w moim webpack.config.js.

Ostrożnie zauważ, że? symbol w pytaniu testowym RegEx.

{ 
    test: /\.js?$/, 
    exclude: /(node_modules)/, 
    loader: 'react-hot-loader' 
} 

on pracował dla mnie !!

Answer 4

Ten błąd wystąpił, gdy brakowało mi nawiasu zamykającego.

uproszczona rekreacji:

const Foo =() => { 
    return (
    'bar' 
); 
}; // this bracket was missing 

export default Foo; 

Answer 5

nie wiem jak rozwiązać ten problem w inny sposób, ale to jest po prostu rozwiązać. Babel ładujący powinien być umieszczony na początku tablicy i wszystko działa.

Answer 6

Zwróć uwagę na podwójną błąd składni nawias otwierający, jak również {{ które mogą powodować ten błąd pojawiać