I try to combine vue and flow together in my project.
There is a webpack vue plugin: vue-loader，I use it to process .vue file. (A .vue file contents scripts/styles/templates which I use in project).
Vue-loader has an option which I can configure a customize pre loader my self. like this:
module.exports = {
entry: './src/index.js',
...
module: {
loaders: [
{ test: /\.js$/, loader: 'flowtype-loader', enforce: 'pre', exclude: /node_modules/ },
{
test: /\.vue$/,
loaders: 'vue-loader',
options: {
preLoaders: {
js: 'flowtype-loader'
},
}
},
]
},
plugins: [
new FlowtypePlugin(),
],
}
and one of my .vue file like this:
<script>// @flow
function square(n: number): number {
return n * n;
}
square("2");
</script>
<template>
some html template
</template>
<style lang="scss">
some scss
</style>When I did this. no error throws out.
I dig into flowtype-loader source code and figure out why. flowtype-loader receive a resourcePath instead of string source. This .vue file start with <script>, not // @flow. Therefore, flow server skip this file.
So, can flowtype-loader pass string source to flow server? Maybe offer an option so that developer can control using string code or file path by themselves.
I try to combine vue and flow together in my project.
There is a webpack vue plugin: vue-loader，I use it to process .vue file. (A .vue file contents scripts/styles/templates which I use in project).
Vue-loader has an option which I can configure a customize pre loader my self. like this:
and one of my .vue file like this:
When I did this. no error throws out.
I dig into flowtype-loader source code and figure out why. flowtype-loader receive a resourcePath instead of string source. This .vue file start with
<script>, not// @flow. Therefore, flow server skip this file.So, can flowtype-loader pass string source to flow server? Maybe offer an option so that developer can control using string code or file path by themselves.