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" />