[英]Vueify: 'import' and 'export' may appear only with 'sourceType: module'
I am using Vue. 我正在使用Vue。 This is how I'm building in my gulpfile:
这就是我在gulpfile中构建的方式:
browserify('./main.js')
.transform(vueify)
.bundle()
.pipe( fs.createWriteStream('./build/bundle.js') );
The problem is vueify doesn't handle the es6 exports in my .js files. 问题是vueify不处理我的.js文件中的es6导出。 It only works in .vue components.
它只适用于.vue组件。 It works with
module.exports
, but I'd like to take advantage of es6 code in my .js files. 它适用于
module.exports
,但我想利用我的.js文件中的es6代码。
When bundle()
is called, I currently get the error: 调用
bundle()
,我当前收到错误:
'import' and 'export' may appear only with 'sourceType: module'
Is there any way to modify the gulpfile to handle js files using es6 that my .vue components are importing? 有没有办法修改gulp文件来使用我的.vue组件导入的es6来处理js文件?
After hours of struggling, I finally figured it out. 经过几个小时的挣扎,我终于明白了。
npm install --save-dev babelify
npm install --save-dev babelify
var babelify = require( 'babelify' )
; var babelify = require( 'babelify' )
; Add .transform( babelify )
: 添加
.transform( babelify )
:
return browserify('./main.js') //tells browserify where to start, but doesn't run the resolve algorithm yet .transform( vueify ) //executes vueify to transform vue components to js .transform( babelify ) //executes babelify to transform es6 to es5 .bundle() //runs the module resolve algorithm on all the require() statements .pipe( fs.createWriteStream('./build/bundle.js') );
OK, I've been running into this for several days trying to get Axios to work with Vue and the OP's self-answer saved me . 好吧,我已经跑了好几天试图让Axios与Vue合作,OP的自我回答救了我 。 That being said, I'm not using Gulp (yet) and had to do several different steps.
话虽这么说,我还没有使用Gulp(还),不得不做几个不同的步骤。
My problem was actually with the import
command. 我的问题实际上是使用
import
命令。 It would error during the Browserify compile and at runtime the error axios is undefined
was ocurring. 它在Browserify 编译期间会出错,并且在运行时错误
axios is undefined
是错误的。
The script section of my .vue file is as follows: 我的.vue文件的脚本部分如下:
<script>
import axios from 'axios';
module.exports = {
name: "address-search",
data: function() {
return {
valid: false,
hash: '',
errors: []
}
},
methods: {
async validateAddress() {
const query = `./validateAddress/` + this.hash;
try {
const response = await axios.get(query);
this.valid = response.data;
} catch (e) {
this.errors.push(e)
}
}
}
}
</script>
My bundle command is as follows: 我的bundle命令如下:
browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js
And during compile I was getting the error stated by the OP: 在编译期间,我收到了OP声明的错误:
'import' and 'export' may appear only with 'sourceType: module'
The steps I took included: 我采取的步骤包括:
npm install --save-dev babel-core
npm install --save-dev babel-core
npm install --save-dev babelify
npm install --save-dev babelify
npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime
browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js
browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js
Voila! 瞧! Now the
import
directive works and Axios is happy. 现在
import
指令有效,Axios很高兴。
In retrospect, it is somewhat obvious why it didn't work in the first place (no mapping for the newer Javascript syntax) but I certainly hope this helps someone else get to delivering business value instead of spending too much time on library management. 回想起来,有点明显为什么它首先不起作用(没有新的Javascript语法的映射)但我当然希望这有助于其他人提供业务价值,而不是花太多时间在图书馆管理上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.