kbone项目添加路径访问别名

给kbone项目添加路径访问别名，这样在项目开发中就可以很方便的访问一些目录，入 assets/images 静态图片目录等

kbone 项目默认也给我们预留是别名配置，如 ： package.json 文件里面的  alias 属性，和 webpack.config.dev.js 配置文件里面的 alias 。

webpack.config.dev.js 配置文件里面的 alias 默认是直接取 package.json 文件里面的 alias 。且，在webpack.mp.config.js 文件中没有别名。那么，默认配置的别名会有以下3个问题

1、这个 alias 只能在 web 开发用，而小程序开发则不能使用别名。

2、package.json不能获取到真实的文件夹目录，在pagekage.json 中的 alias 只是一个简单的字符串，当你在不同的目录下面使用的时候，你会发现经常会找不到文件。

3、我们目前有好几个打包的配置文件，webpack.config.dev.js 、webpack.config.prod.js 和 webpack.mp.config.js，如果单独在配置我们需要配置三遍。

 

那么怎么办呢？

 

最后想到，只能在 package.json 文件里面进行配置，但是之前说到，在 package.json 文件里面配置的话，不能获取到真实的目录，这个时候我们就需要对 webpack.config.dev.js 、webpack.config.prod.js 和 webpack.mp.config.js 配置文件的配置进行改造：

 

1、我们先在 package.json 文件中配置好所有的别名，并且，所有要访问文件夹路径的别名都已 @ 开头：

package.json

{
    alias: {
        "注释": "已 @ 开头的别名，其值都是从目录 src 内进行设置，在对应的  webpack.config.dev.js 和 webpack.mp.config.js 中会将这个路径处理成项目可以用的路径",
        "@images": "/assets/images",
        "@components": "/components"
        ...
    }
}    

　　注意： package.json 中不能出现注释，因此，我把注释写成了对象的一部分。

 

2、接下来我们要改造 webpack.config.dev.js 、webpack.config.prod.js 和 webpack.mp.config.js 配置文件

webpack.congif.dev.js 和 webpack.config.prod.js  改造前代码：

const fileList = require('./entry');

const pjson = require('../package.json');

module.exports = {
    ....
    alias: pjson.alias
    ....
}

 

webpack.config.dev.js 和 webpack.config.prod.js  改造后代码：

const fileList = require('./entry');

const pjson = require('../package.json');

// 从package.json 中获取 arias，把@开头的处理成当前项目能用的路径
if (pjson && pjson.alias) {
  let alias = pjson.alias;
  let a = ''
  for (a in alias) {
    if (a.indexOf('@') === 0) {
        alias[a] = path.join(__dirname, '../src' + alias[a]);
    }
  }
}

module.exports = {
    ....
    alias: pjson.alias
    ....
}

　　注意：红色为新增代码

 

3、接下来改造小程序打包配置文件 webpack.mp.config.js ，在改造前 webpack.mp.config.js 配置文件中并没有别名的配置，那么我们就在 resolve属性值中新增 alias 配置项，代码如下：

webpack.mp.config.js 修改前：

const MpPlugin = require('mp-webpack-plugin')
const isOptimize = false // 是否压缩业务代码，开发者工具可能无法完美支持业务代码使用到的 es 特性，建议自己做代码压缩

module.exports = {
    mode: 'production',
    ....
    resolve: {
        extensions: ['*', '.js', '.vue', '.json'],
　　　　 ...
    }
　　 ...
}

　

webpack.mp.config.js 修改后：

const MpPlugin = require('mp-webpack-plugin')
const isOptimize = false // 是否压缩业务代码，开发者工具可能无法完美支持业务代码使用到的 es 特性，建议自己做代码压缩

const pjson = require('../package.json')

// 从package.json 中获取 arias，把@开头的处理成当前项目能用的路径
if (pjson && pjson.alias) {
  let alias = pjson.alias;
  let a = ''
  for (a in alias) {
    if (a.indexOf('@') === 0) {
        alias[a] = path.join(__dirname, '../src' + alias[a]);
    }
  }
}


module.exports = {
    mode: 'production',
    ....
    resolve: {
        extensions: ['*', '.js', '.vue', '.json'],
        alias: {
            ...pjson.alias,
            // '@images': path.join(__dirname, "../src/assets/images"),
            // '@components': path.join(__dirname, '../src/components'),
        }
　　　　 ...
    }
　　 ...
}

　　注意：红色为新增代码

 

4、业务代码中引用 /src/assets/iamges/logo.jpg 文件

<image src="@images/logo.jpg" alt="logo" />