Can't process vue files with postLoaders about vue-loader HOT 14 CLOSED

@sjoerdvisscher is there any particular reason for the -! prefix here?

from vue-loader.

No, I just copied what multi-loader is doing: https://github.com/webpack/multi-loader/blob/master/index.loader.js#L6

from vue-loader.

Weird, the docs say: adding -! to a request will disable configured preLoaders and loaders but not the postLoaders

from vue-loader.

I think loaderUtils.stringifyRequest breaks the -!.

@OEvgeny Does it work if you replace it with JSON.stringify?

from vue-loader.

@sjoerdvisscher No, it works the same way as before.
I replace line 32 with this:

    return 'require(' + JSON.stringify('-!' + loader(part, lang) + require.resolve('./selector.js') + '?' + part + '/' + lang + '!' + vueUrl) + ')';

And removing -! also fixes issue.

from vue-loader.

@OEvgeny one unrelated problem: it seems using postLoaders like this doesn't really get to lint the script contents inside vue files, because they are compiled into something like this:

require("-!style!css!./../../../vue-loader/selector.js?style!./b.vue")
module.exports = require("-!./../../../vue-loader/selector.js?script!./b.vue")
module.exports.template = require("-!html!./../../../vue-loader/selector.js?template!./b.vue")

from vue-loader.

This is probably the proper config to jshint the JavaScript in your vue files:

var vue = require('vue-loader')

module.exports = {
  entry: "./src/main.js",
  output: {
    path: "./build",
    filename: "build.js"
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: vue.withLoaders({
          js: 'jshint'
        })
      }
    ]
  }
}

from vue-loader.

In addition: because .vue files are also valid HTML files, you can lint them directly with jshint using --extract=always option. This will give you correct line numbers, but it won't work if you are using pre-processors for <script>.

from vue-loader.

Thanks, Evan. Will try this approach for jshint.

from vue-loader.

But I can't use this for code coverage: https://github.com/deepsweet/istanbul-instrumenter-loader

from vue-loader.

@OEvgeny I'll try to investigate the best practices for linting and testing when using vue-loader after 0.12 stabilizes. In the meanwhile, do let me know if you find any good solutions.

from vue-loader.

@yyx990803 Ok, I will try.

from vue-loader.

Didn't know that postLoaders works well as loaders.
This seems to work properly for .vue coverage. I included examples with babel and plain js.

gulp.task('test:cover', function(done) {
  var vue = require('vue-loader')
  karma.start({
    browsers: ['PhantomJS'],
    files: [
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
      './test/index.js'
    ],
    frameworks: ['jasmine'],
    preprocessors: {
      './test/index.js': ['webpack'],
    },
    reporters: ['dots', 'coverage'],
    singleRun: true,
    webpack: {
      module: {
        postLoaders: [
          {
            test: /\.js$/,
            // exclude this dirs from coverage
            exclude: /(test|node_modules|bower_components)/,
            loader: 'istanbul-instrumenter'
          },
          {
            test: /\.es6$/,
            // exclude this dirs from coverage
            exclude: /(test|node_modules|bower_components)/,
            loader: 'isparta'
          },
        ],
        loaders: [
          {
            test: /\.vue$/, loader: vue.withLoaders({
              js: 'istanbul-instrumenter',
              esnext: 'babel!isparta'
            })
          }
        ],
      },
      watch: true,
    },
    webpackServer: {
      noInfo: true,
    },
    coverageReporter: {
      reporters: [
        { type: 'text-summary' }
      ]
    }
  }, done)
})

./test/index.js content:

var testsContext = require.context('.', true, /_[a-z]*\.js$/)
testsContext.keys().forEach(testsContext)

from vue-loader.

Great! AFAIK all loaders are written against the same API. postLoaders is just a way to control when the loader should be executed on the file.

from vue-loader.