vue - utils.js

exports:导出功能函数或变量

module.exports:默认导出{}

 

-----------------------------------------------------------------------------------

module.exports 初始值为一个空对象 {}

exports 是指向的 module.exports 的引用

require() 返回的是 module.exports 而不是 exports

-------------------------------------------------------

 

关于module.exports和exports.js详情请查看：https://cnodejs.org/topic/5231a630101e574521e45ef8

 

  1 'use strict'
  2 // 路径
  3 const path = require('path')
  4 // 来自config/index.js
  5 const config = require('../config')
  6 
  7 const ExtractTextPlugin = require('extract-text-webpack-plugin')
  8 // 来自package.json
  9 const packageConfig = require('../package.json')
 10 
 11 exports.assetsPath = function (_path) {
 12   const assetsSubDirectory = process.env.NODE_ENV === 'production'
 13     ? config.build.assetsSubDirectory
 14     : config.dev.assetsSubDirectory
 15 
 16   return path.posix.join(assetsSubDirectory, _path)
 17 }
 18 
 19 exports.cssLoaders = function (options) {
 20   options = options || {}
 21 
 22   const cssLoader = {
 23     loader: 'css-loader',
 24     options: {
 25       sourceMap: options.sourceMap
 26     }
 27   }
 28 
 29   const postcssLoader = {
 30     loader: 'postcss-loader',
 31     options: {
 32       sourceMap: options.sourceMap
 33     }
 34   }
 35 
 36   // 生成与extract文本插件一起使用的加载器字符串
 37   function generateLoaders(loader, loaderOptions) {
 38     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 39 
 40     if (loader) {
 41       loaders.push({
 42         loader: loader + '-loader',
 43         options: Object.assign({}, loaderOptions, {
 44           sourceMap: options.sourceMap
 45         })
 46       })
 47     }
 48 
 49     //指定该选项时提取CSS
 50     //（在生产构建期间就是这种情况）
 51     if (options.extract) {
 52       return ExtractTextPlugin.extract({
 53         use: loaders,
 54         fallback: 'vue-style-loader'
 55       })
 56     } else {
 57       return ['vue-style-loader'].concat(loaders)
 58     }
 59   }
 60 
 61   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 62   return {
 63     css: generateLoaders(),
 64     postcss: generateLoaders(),
 65     less: generateLoaders('less'),
 66     sass: generateLoaders('sass', { indentedSyntax: true }),
 67     scss: generateLoaders('sass'),
 68     stylus: generateLoaders('stylus'),
 69     styl: generateLoaders('stylus')
 70   }
 71 }
 72 
 73 // 为单独样式文件生成加载器（.vue之外）
 74 exports.styleLoaders = function (options) {
 75   const output = []
 76   const loaders = exports.cssLoaders(options)
 77 
 78   for (const extension in loaders) {
 79     const loader = loaders[extension]
 80     output.push({
 81       test: new RegExp('\\.' + extension + '$'),
 82       use: loader
 83     })
 84   }
 85 
 86   return output
 87 }
 88 
 89 exports.createNotifierCallback = () => {
 90   const notifier = require('node-notifier')
 91 
 92   return (severity, errors) => {
 93     if (severity !== 'error') return
 94 
 95     const error = errors[0]
 96     const filename = error.file && error.file.split('!').pop()
 97 
 98     notifier.notify({
 99       title: packageConfig.name,
100       message: severity + ': ' + error.name,
101       subtitle: filename || '',
102       icon: path.join(__dirname, 'logo.png')
103     })
104   }
105 }