“ import”和“ export”可能仅与“ sourceType:module”一起出现

时间:2018-12-03 10:13:48

标签: ecmascript-6 gulp browserify vueify

我有以下gulpfile.js:

var gulp = require('gulp'),
	babelify = require('babelify'),
	browserify = require('browserify'),
	envify = require('envify/custom'),
	eslint = require('gulp-eslint'),
	stylelint = require('gulp-stylelint'),
	vueify = require('vueify');

var vueCompile = function (app) {
	var b = browserify({
		entries: 'Views/Ui/src/' + app + '/main.js',
		debug: true,
		paths: ['./node_modules', './node_modules/globalize/dist'],
		transform: [babelify, vueify]
	});

	return b.transform(
		{ global: true }, // Required in order to process node_modules files
		envify({ NODE_ENV: process.env.NODE_ENV })
	)
		.bundle()
		// .pipe(source('ui.js'))
		// .pipe(buffer())
		// .pipe(process.env.NODE_ENV === 'production' ? uglify() : buffer())
		// .pipe(gulp.dest('Views/Ui/js/' + app))
};

gulp.task('vue', function () {
	return vueCompile('ui');
});

和以下package.json依赖项:

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.13.0",
    "babel-runtime": "^6.26.0",
    "babelify": "7.3.0",
    "browserify": "^16.2.2",
    "dateformat": "^1.0.12",
    "envify": "^4.1.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^2.0.11",
    "gulp-debug": "3.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^4.3.9",
    "gulp-zip": "^3.2.0",
    "merge-stream": "^1.0.1",
    "node-sass": "^3.13.1",
    "run-sequence": "^2.1.0",
    "sassify": "^2.0.0",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^1.1.0",
    "vue": "^2.5.16",
    "vue-resource": "1.5.1",
    "vueify": "^9.4.0",
    "vuex": "^2.0.0"
  },
  "dependencies": {
    "acorn": "^6.0.4",
    "cldr-core": "^33.0.0",
    "cldr-dates-full": "^33.0.0",
    "cldr-numbers-full": "^33.0.0",
    "devextreme": "18.2.3",
    "devextreme-vue": "18.2.3",
    "eslint": "^3.18.0",
    "eslint-plugin-vue": "beta",
    "globalize": "^1.3.0",
    "gulp-eslint": "^4.0.0",
    "gulp-phpcs": "^2.2.0",
    "gulp-stylelint": "^4.0.0",
    "quill": "^1.3.6",
    "stylelint": "^8.0.0",
    "stylelint-config-recommended": "^1.0.0",
    "stylelint-config-standard": "^17.0.0",
    "stylelint-processor-html": "^1.0.0",
    "v-hotkey": "^0.2.3",
    "vinyl-source-stream": "^1.1.0"
  }

由于我试图最小化我的示例,因此可能有一些示例不需要的依赖项。

我的main.js以下面的代码行开头:

import App from './components/App.vue'

如果我要运行gulp任务vue,它将以以下输出结束:

[10:57:57] Using gulpfile ...\gulpfile.js
[10:57:57] Starting 'vue'...
[10:57:57] 'vue' errored after 68 ms
[10:57:57] Error:
...\Ui\src\akte\main.js:1
import App from './components/App.vue';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

我可以说,babelify似乎无法成功运行,因为在调用.bundle()方法时将引发异常。

我缺少基本的东西吗?

1 个答案:

答案 0 :(得分:0)

我自己找到了答案。因此,以防万一有人遇到相同的问题,这是我的解决方案:

$queryGQ = "SELECT questions.q_id, questions.question, questions.description, questions.link, questions.m_id AS qMID, questions.timestamp, questions.linktitle, questions.answers, questions.upvotes, answers.a_id, answers.q_id AS qQID, answers.answer, members.m_id AS mMID, members.navn, members.avidaname FROM questions INNER JOIN answers ON answers.q_id = questions.q_id INNER JOIN members ON questions.m_id = members.m_id WHERE public = '1' ORDER BY questions.timestamp DESC LIMIT $TheLimit"; if ($stmtGQ = $con->prepare($queryGQ)) { /* execute statement */ $stmtGQ->execute(); /* bind result variables */ $stmtGQ->bind_result($q_id, $question, $description, $link, $qMID, $timestamp, $linktitle, $answers, $upvotes, $aAID, $qQID, $answer, $mMID, $navn, $avidaname); /* fetch values */ while ($stmtGQ->fetch()) { //MAGIC HAPPENS } } 文件丢失,因此在转换代码时出了点问题。 我的文件包含以下内容:

.babelrc

将文件添加到{ "presets": [ "env", "stage-2" ], "plugins": [ "transform-runtime" ] } 所在的目录后,一切正常。