Gulp, Vue, Webpack, Babel and Uncaught SyntaxError: Unexpected token import
Gulp, Vue, Webpack, Babel and Uncaught SyntaxError: Unexpected token import
我一整天都在努力让它工作,但没有任何运气,所以如果有人能发光,我将不胜感激。
我正在尝试设置使用 ES6 文件以及使用 Webpack 的 Vue 的环境。
我已经安装了所有依赖项,并创建了以下文件:
webpack.config.js
module.exports = {
entry: './resources/assets/source/js/app.js',
output: {
filename: 'app.js'
},
devtool: 'source-map',
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
}
]
}
};
gulpfile.js
var gulp = require('gulp'),
webpack = require('webpack-stream');
gulp.task('script', () => {
"use strict";
return gulp.src('./resources/assets/source/js/app.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./public/assets/js/'));
});
gulp.task('default', ['script']);
resources/assets/source/js/app.js
var Vue = require('vue');
import Alert from './components/Alert.vue';
new Vue({
el: '#app',
components: { Alert },
ready() {
alert('ready');
}
});
resources/assets/source/js/components/Alert.vue
<template>
<div :class="alertClasses" v-show="show">
<slot></slot>
<span class="Alert__close" @click="show == false">x</span>
</div>
</template>
<script>
export default {
props: ['type'],
data() {
return {
show: true
};
},
computed: {
alertClasses() {
var type = this.type;
return {
'Alert': true,
'Alert--Success': type == 'success',
'Alert--Error': type == 'error'
};
}
}
};
</script>
当我 运行g gulp
一切都被捆绑和编译,但是当我 运行 它在浏览器中时,我得到 Uncaught SyntaxError: Unexpected token import
指向 resources/assets/source/js/app.js
文件.
经过几个小时的尝试找出可能导致它的原因后,我 运行 没有想法并且正处于放弃的边缘,因此非常感谢任何帮助。
import
问题似乎在上面的评论中得到了解决,但还有一个问题。
.vue
文件似乎不是用标准 JavaScript 语法编写的。为了导入它们,我们需要以某种方式将它们转换为 JavaScript.
在查看 webpack.config.js
时,您可能会注意到,带有 .vue
扩展名的文件不会以任何方式进行转译。
您可以使用自定义加载程序解决此问题。在这种情况下,您要查找的加载器是 vue-loader
解决问题的步骤:
npm install --save-dev vue-loader
- 完成后,尝试使用以下
module
部分更新您的 webpack.config.js
:
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
},
],
}
更多详情:
它有什么帮助吗?如果没有,请告诉我。
您应该从 webpack.config.js 文件中删除查询对象,并创建包含这些内容的 .babelrc 文件。
{
"presets": ["es2015"],
"plugins": ["transform-runtime"],
"comments": false
}
我一整天都在努力让它工作,但没有任何运气,所以如果有人能发光,我将不胜感激。
我正在尝试设置使用 ES6 文件以及使用 Webpack 的 Vue 的环境。
我已经安装了所有依赖项,并创建了以下文件:
webpack.config.js
module.exports = {
entry: './resources/assets/source/js/app.js',
output: {
filename: 'app.js'
},
devtool: 'source-map',
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
}
]
}
};
gulpfile.js
var gulp = require('gulp'),
webpack = require('webpack-stream');
gulp.task('script', () => {
"use strict";
return gulp.src('./resources/assets/source/js/app.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./public/assets/js/'));
});
gulp.task('default', ['script']);
resources/assets/source/js/app.js
var Vue = require('vue');
import Alert from './components/Alert.vue';
new Vue({
el: '#app',
components: { Alert },
ready() {
alert('ready');
}
});
resources/assets/source/js/components/Alert.vue
<template>
<div :class="alertClasses" v-show="show">
<slot></slot>
<span class="Alert__close" @click="show == false">x</span>
</div>
</template>
<script>
export default {
props: ['type'],
data() {
return {
show: true
};
},
computed: {
alertClasses() {
var type = this.type;
return {
'Alert': true,
'Alert--Success': type == 'success',
'Alert--Error': type == 'error'
};
}
}
};
</script>
当我 运行g gulp
一切都被捆绑和编译,但是当我 运行 它在浏览器中时,我得到 Uncaught SyntaxError: Unexpected token import
指向 resources/assets/source/js/app.js
文件.
经过几个小时的尝试找出可能导致它的原因后,我 运行 没有想法并且正处于放弃的边缘,因此非常感谢任何帮助。
import
问题似乎在上面的评论中得到了解决,但还有一个问题。
.vue
文件似乎不是用标准 JavaScript 语法编写的。为了导入它们,我们需要以某种方式将它们转换为 JavaScript.
在查看 webpack.config.js
时,您可能会注意到,带有 .vue
扩展名的文件不会以任何方式进行转译。
您可以使用自定义加载程序解决此问题。在这种情况下,您要查找的加载器是 vue-loader
解决问题的步骤:
npm install --save-dev vue-loader
- 完成后,尝试使用以下
module
部分更新您的webpack.config.js
:
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
},
],
}
更多详情:
它有什么帮助吗?如果没有,请告诉我。
您应该从 webpack.config.js 文件中删除查询对象,并创建包含这些内容的 .babelrc 文件。
{
"presets": ["es2015"],
"plugins": ["transform-runtime"],
"comments": false
}