Vue源码初探之resolve（一）

这里记录我从vue源码中学习到的一些知识。

resolve函数

vue中的使用

在组件之间中相互引用，可能是这样的：

import Hello from '../components/Hello';

其中的路径是相对于当前页面的，如果嵌套的更加复杂的话，那么写起来就会很麻烦了。 但是在vue中我们可以通过这样的配置。

resolve: {
    alias: {
      "@components": path.join(__dirname, "..", "src", "components"),
    }
}

这样我们再引用components中的文件就可以向下面这样写了

import Hello from '@components/Hello';

是不是更加简洁了?但是我们在使用过程中要注意：

• 在webpack.config.js中不能使用相对路径（../以及./）,必须使用绝对路径，所以可以通过path.join，path.resolve，_dirname这种方式引入路径另外，
• static下的文件（静态文件）不能使用slias下的配置，必须使用一般的配置。

代码实现

resolve使我们的路径更加简洁，不再用../、./层层去找还出问题，那resolve在vue源码中如何实现的呢？

源码目录：scripts/config.js

const aliases = require('./alias')

//获取真实路径
const resolve = p => {
    const base = p.split('/')[0]
    if (aliases[base]) {
        return path.resolve(aliases[base], p.slice(base.length + 1))
    } else {
        return path.resolve(__dirname, '../', p)
    }
} 

scripts/alias

const path = require('path')

//别名配置代码
module.exports = {
    vue: path.resolve(__dirname, '../src/platforms/web/entry-runtime-with-compiler'),
    compiler: path.resolve(__dirname, '../src/compiler'),
    core: path.resolve(__dirname, '../src/core'),
    shared: path.resolve(__dirname, '../src/shared'),
    web: path.resolve(__dirname, '../src/platforms/web'),
    weex: path.resolve(__dirname, '../src/platforms/weex'),
    server: path.resolve(__dirname, '../src/server'),
    entries: path.resolve(__dirname, '../src/entries'),
    sfc: path.resolve(__dirname, '../src/sfc')
} 

哈哈，是不是清晰明了，看懂后我们就可以在自己的项目中使用这个方法了。

参考文章：

vue路径优化之resolve

Vue源码解读