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

  

 

  

posted @ 2020-03-16 15:54  破男孩  阅读(281)  评论(0编辑  收藏