nicer output with named exports support

Author: yyx990803

lib/loader.js

@@ -41,10 +41,11 @@ module.exports = function (content) {
   var moduleId = 'data-v-' + genId(filePath)
   var styleRewriter = styleRewriterPath + '?id=' + moduleId
 
+  var isProduction = this.minimize || process.env.NODE_ENV === 'production'
+
   var needCssSourceMap =
+    !isProduction &&
     this.sourceMap &&
-    !this.minimize &&
-    process.env.NODE_ENV !== 'production' &&
     options.cssSourceMap !== false
 
   var defaultLoaders = {
@@ -135,10 +136,11 @@ module.exports = function (content) {
 
   var parts = parse(content, fileName, this.sourceMap)
   var hasScoped = parts.styles.some(function (s) { return s.scoped })
-  var output = 'var __vue_script__\n'
+  var output = 'var __vue_exports__, __vue_options__\n'
 
   // add requires for styles
-  if (!isServer) {
+  if (!isServer && parts.styles.length) {
+    output += '\n/* styles */\n'
     parts.styles.forEach(function (style, i) {
       output += style.src
         ? getRequireForImport('styles', style, style.scoped)
@@ -149,42 +151,33 @@ module.exports = function (content) {
   // add require for script
   var script = parts.script
   if (script) {
+    output += '\n/* script */\n'
     output +=
-      '__vue_script__ = ' + (
+      '__vue_exports__ = ' + (
         script.src
           ? getRequireForImport('script', script)
           : getRequire('script', script)
       )
-    // check and warn named exports
-    if (!this.minimize) {
-      output +=
-        'if (__vue_script__ &&\n' +
-        '    __vue_script__.__esModule &&\n' +
-        '    Object.keys(__vue_script__).length > 1) {\n' +
-        '  console.warn(' + JSON.stringify(
-            '[vue-loader] ' + path.relative(process.cwd(), filePath) +
-            ': named exports in *.vue files are ignored.'
-          ) + ')' +
-        '}\n'
-    }
   }
 
-  // plain require() compatibility
-  var exports = 'if (__exports__.__esModule) __exports__ = __exports__.default\n'
+  var exports =
+    '__vue_options__ = __vue_exports__ || {}\n' +
+    // ES6 modules interop
+    'if (__vue_options__.__esModule) __vue_options__ = __vue_options__.default\n' +
+    // constructor export interop
+    'if (typeof __vue_options__ === "function") __vue_options__ = __vue_options__.options\n'
 
   // add require for template
   var template = parts.template
   if (template) {
+    output += '\n/* template */\n'
     output += 'var __vue_template__ = ' + (
       template.src
         ? getRequireForImport('template', template)
         : getRequire('template', template)
     )
     // attach render functions to exported options
     exports +=
-      'var __vue_options__ = (typeof __exports__ === "function" ' +
-        '? (__exports__.options || (__exports__.options = {})) ' +
-        ': __exports__)\n' +
       '__vue_options__.render = __vue_template__.render\n' +
       '__vue_options__.staticRenderFns = __vue_template__.staticRenderFns\n'
     // attach scoped id
@@ -194,39 +187,39 @@ module.exports = function (content) {
   }
 
   if (!query.inject) {
-    output +=
-      'var __exports__ = __vue_script__ || {}\n' +
-      exports +
-      'module.exports = __exports__'
+    output += exports
     // hot reload
     if (
       !isServer &&
-      !this.minimize &&
-      process.env.NODE_ENV !== 'production' &&
+      !isProduction &&
       (parts.script || parts.template)
     ) {
       output +=
-        '\nif (module.hot) {(function () {' +
+        '\n/* hot reload */\n' +
+        'if (module.hot) {(function () {\n' +
         '  var hotAPI = require("' + hotReloadAPIPath + '")\n' +
         '  hotAPI.install(require("vue"), false)\n' +
         '  if (!hotAPI.compatible) return\n' +
         '  module.hot.accept()\n' +
         '  if (!module.hot.data) {\n' +
         // initial insert
-        '    hotAPI.createRecord("' + moduleId + '", __exports__)\n' +
+        '    hotAPI.createRecord("' + moduleId + '", __vue_options__)\n' +
         '  } else {\n' +
         // update
-        '    hotAPI.reload("' + moduleId + '", __exports__)\n' +
+        '    hotAPI.reload("' + moduleId + '", __vue_options__)\n' +
         '  }\n' +
-        '})()}'
+        '})()}\n'
     }
+    // final export
+    output += '\nmodule.exports = __vue_exports__ || __vue_options__\n'
   } else {
+    // inject-loader support
     output +=
+      '\n/* dependency injection */\n' +
       'module.exports = function (injections) {\n' +
-      '  var __exports__ = __vue_script__\n' +
-      '    ? __vue_script__(injections)\n' +
-      '    : {}\n' + exports +
-      '  return __exports__\n' +
+      '  __vue_exports__ = __vue_exports__(injections)\n' +
+      exports +
+      '  return __vue_exports__ || __vue_options__\n' +
       '}'
   }
 

package.json

@@ -24,7 +24,7 @@
   "homepage": "https://github.com/vuejs/vue-loader",
   "scripts": {
     "lint": "eslint lib",
-    "test": "eslint lib && mocha test/test.js --slow 5000 --timeout 10000",
+    "test": "eslint lib && mocha --slow 5000 --timeout 10000",
     "docs": "cd docs && gitbook serve",
     "deploy-docs": "bash ./docs/deploy.sh"
   },
@@ -39,7 +39,7 @@
     "source-map": "^0.5.6",
     "vue-hot-reload-api": "^2.0.1",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.0.0-alpha.2"
+    "vue-template-compiler": "^2.0.0-alpha.8"
   },
   "peerDependencies": {
     "css-loader": "^0.23.1"

test/fixtures/basic.vue

@@ -3,6 +3,10 @@
 </template>
 
 <script>
+export function test () {
+  return 'hi'
+}
+
 export default {
   data () {
     return {

test/test.js

@@ -54,7 +54,7 @@ function test (options, assert) {
           console.log(err[0].data.error.stack)
           expect(err).to.be.null
         }
-        assert(window)
+        assert(window, interopDefault(window.vueModule), window.vueModule)
       }
     })
   })
@@ -65,12 +65,19 @@ function assertRenderFn (options, template) {
   expect(options.render.toString()).to.equal('function (){' + compiled.render + '}')
 }
 
+function interopDefault (module) {
+  return module
+    ? module.__esModule ? module.default : module
+    : module
+}
+
 describe('vue-loader', function () {
   it('basic', function (done) {
     test({
       entry: './test/fixtures/basic.vue'
-    }, function (window) {
-      var module = window.vueModule
+    }, function (window, module, rawModule) {
+      // test named export
+      expect(rawModule.test()).to.equal('hi')
       assertRenderFn(module, '<h2 class="red">{{msg}}</h2>')
       expect(module.data().msg).to.contain('Hello from Component A!')
       var style = window.document.querySelector('style').textContent
@@ -82,8 +89,7 @@ describe('vue-loader', function () {
   it('pre-processors', function (done) {
     test({
       entry: './test/fixtures/pre.vue'
-    }, function (window) {
-      var module = window.vueModule
+    }, function (window, module) {
       assertRenderFn(module,
         '<div>' +
           '<h1>This is the app</h1>' +
@@ -101,8 +107,7 @@ describe('vue-loader', function () {
   it('scoped style', function (done) {
     test({
       entry: './test/fixtures/scoped-css.vue'
-    }, function (window) {
-      var module = window.vueModule
+    }, function (window, module) {
       var id = 'data-v-' + genId(require.resolve('./fixtures/scoped-css.vue'))
       expect(module._scopeId).to.equal(id)
       assertRenderFn(module,
@@ -137,8 +142,7 @@ describe('vue-loader', function () {
   it('template import', function (done) {
     test({
       entry: './test/fixtures/template-import.vue'
-    }, function (window) {
-      var module = window.vueModule
+    }, function (window, module) {
       assertRenderFn(module, '<div><h1>hello</h1></div>')
       done()
     })
@@ -147,8 +151,7 @@ describe('vue-loader', function () {
   it('script import', function (done) {
     test({
       entry: './test/fixtures/script-import.vue'
-    }, function (window) {
-      var module = window.vueModule
+    }, function (window, module) {
       expect(module.data().msg).to.contain('Hello from Component A!')
       done()
     })
@@ -168,7 +171,7 @@ describe('vue-loader', function () {
       code.split(/\r?\n/g).some(function (l, i) {
         if (targetRE.test(l)) {
           line = i + 1
-          col = l.length
+          col = 0
           return true
         }
       })
@@ -177,7 +180,7 @@ describe('vue-loader', function () {
         column: col
       })
       expect(pos.source.indexOf('basic.vue') > -1)
-      expect(pos.line).to.equal(9)
+      expect(pos.line).to.equal(13)
       done()
     })
   })
@@ -216,11 +219,11 @@ describe('vue-loader', function () {
     test({
       entry: './test/fixtures/inject.js'
     }, function (window) {
-      var module = window.injector({
+      var module = interopDefault(window.injector({
         './service': {
           msg: 'Hello from mocked service!'
         }
-      })
+      }))
       assertRenderFn(module, '<div class="msg">{{ msg }}</div>')
       expect(module.data().msg).to.contain('Hello from mocked service!')
       done()
@@ -241,8 +244,7 @@ describe('vue-loader', function () {
           { test: /\.png$/, loader: 'file-loader?name=[name].[hash:6].[ext]' }
         ]
       }
-    }, function (window) {
-      var module = window.vueModule
+    }, function (window, module) {
       assertRenderFn(module, '<img src="logo.c9e00e.png">\n<img src="logo.c9e00e.png">')
       var style = window.document.querySelector('style').textContent
       expect(style).to.contain('html { background-image: url(logo.c9e00e.png);\n}')