vue源码之路径别名的技巧转换

Posted 2020-12-10 ttblog5

//以web/entry-runtime.js为例子，base就是web，然后到aliases里去找里面刚好有web,就取到这个路径，再和剩余的/entry-runtime.js拼接，最终经过Rollup的构建打包，最终在dist目录下生成vue.runtime.common.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)
  }
}

const builds = {
  // Runtime only (CommonJS)builds. Used by bundlers e.g. Webpack & Browserify
  ‘web-runtime-cjs-dev‘: {
    //entry表?构建的?? JS ?件地址
    //dest 属性表?构建后的 JS ?件地址
    //format 属性表?构建的格式
    //cjs 表?构建出来的 ?件遵循 CommonJS 规范，
    // es 表?构建出来的?件遵循 ES Module 规范。
    // umd 表?构建出来的? 件遵循 UMD 规范。
    entry: resolve(‘web/entry-runtime.js‘),
    dest: resolve(‘dist/vue.runtime.common.dev.js‘),
    format: ‘cjs‘,
    env: ‘development‘,
    banner
  },
  ...
}

 

alias.js

const path = require(‘path‘)

const resolve = p => path.resolve(__dirname, ‘../‘, p)
//这是一个对象存放着这些核心路径
module.exports = {
  vue: resolve(‘src/platforms/web/entry-runtime-with-compiler‘),
  compiler: resolve(‘src/compiler‘),
  core: resolve(‘src/core‘),
  shared: resolve(‘src/shared‘),
  web: resolve(‘src/platforms/web‘),
  weex: resolve(‘src/platforms/weex‘),
  server: resolve(‘src/server‘),
  sfc: resolve(‘src/sfc‘)
}