Skip to content
Permalink
Browse files

Use https://github.com/d2-projects/d2-advance/tree/master/tools/vue-f…

  • Loading branch information...
FairyEver committed May 6, 2019
1 parent 3e083f7 commit 988c606f86425d0f23a5df40962497bdf128f394
@@ -25,7 +25,7 @@ export default {
watch: {
$route: {
handler (to) {
this.path = get(last(to.matched), 'components.default.__file')
this.path = get(last(to.matched), 'components.default.__source')
},
immediate: true
}
@@ -0,0 +1,26 @@
# Vue Filename Injector

Inject the file path of the `.vue` on `this.$options.__source`.

## Usage

`vue.config.js`:

``` js
const VueFilenameInjector = require('./path/to/vue-filename-injector')
module.exports = {
chainWebpack: config => {
// only with chainWebpack
VueFilenameInjector(config, {
propName: '__source' // default
})
}
}
```

## Relevant

https://github.com/neutrinojs/webpack-chain
https://vue-loader.vuejs.org/guide/custom-blocks.html
@@ -0,0 +1,2 @@
const all = require('./src/index.js')
module.exports = all
@@ -0,0 +1,18 @@
const { blockName } = require('./lib/config.js')

// for chainWebpack
module.exports = function(config, options) {
config.module
.rule('vue')
.use('vue-filename-injector')
.loader(require.resolve('./lib/injector.js'))
.options(options)
.after('vue-loader')
.end()
config.module
.rule('')
.resourceQuery(new RegExp(`blockType=${blockName}`))
.use('vue-filename-injector-loader')
.loader(require.resolve('./lib/loader.js'))
.end()
}
@@ -0,0 +1,7 @@
const defaultPropName = '__source'
const blockName = 'vue-filename-injector'

module.exports = {
defaultPropName,
blockName
}
@@ -0,0 +1,30 @@
const path = require('path')
const loaderUtils = require('loader-utils')

const { blockName, defaultPropName } = require('./config.js')

module.exports = function (content /*, map, meta */) {
const loaderContext = this

const {
rootContext,
resourcePath
} = loaderContext

const context = rootContext || process.cwd()
const options = loaderUtils.getOptions(loaderContext) || {}
const rawShortFilePath = path
.relative(context, resourcePath)
.replace(/^(\.\.[\/\\])+/, '')

const propName = options.propName || defaultPropName

content += `
<${blockName}>
export default function (Component) {
Component.options.${propName} = ${JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))}
}
</${blockName}>
`
return content
}
@@ -0,0 +1,3 @@
module.exports = function (source, map) {
this.callback(null, source, map)
}
@@ -1,4 +1,6 @@
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const VueFilenameInjector = require('./tools/vue-filename-injector')


// 拼接路径
const resolve = dir => require('path').join(__dirname, dir)
@@ -46,14 +48,9 @@ module.exports = {
)
// TRAVIS 构建 vue-loader 添加 filename
.when(process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development',
config => config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.exposeFilename = true
return options
})
VueFilenameInjector(config, {
propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME
})
)
// 非开发环境
.when(process.env.NODE_ENV !== 'development', config => {

0 comments on commit 988c606

Please sign in to comment.
You can’t perform that action at this time.