Taro:babel插件-图片资源文件打包替换
当老的项目中存在这种图片引入方式
const icon = require('@/assets/image/xxx')
import icon from '@/assets/image/xxx'因为图片太占用体积,需要使用网络图片替换,无需修改代码。
babel-plugin-replace-image.js
require('dotenv').config()
const t = require('@babel/types');
// 微信小程序打包
const OSS_HOST = process.env.OSS_HOST;
console.log('OSS_HOST', OSS_HOST) //
/**
* 替换图片路径插件
*/
module.exports = function () {
return {
visitor: {
// 1.在微信小程序打包情况下,修改图片地址为oss地址
ImportDeclaration(path) {
try {
const { node } = path;
const { value } = node.source;
if (value.startsWith('@/assets/image')) {
const name = node.specifiers[0].local.name;
const url = value.replace('@/assets/image', `${OSS_HOST}/assets/image`);
// const bg = 'xxxx'
path.replaceWith(t.variableDeclaration('const', [t.variableDeclarator(t.identifier(name), t.stringLiteral(url))]));
}
} catch (e) {
console.error('import方式图片url替换失败');
}
},
CallExpression(path) {
const { node } = path;
const { callee, arguments: args } = node;
try {
if (callee.type === 'Identifier' && callee.name === 'require' ) {
const value = args[0].value;
if (value.startsWith('@/assets/image')) {
path.replaceWith(t.stringLiteral(value.replace('@/assets/image', `${OSS_HOST}/assets/image`)));
}
}
} catch (e) {
console.error('require形式图片url替换失败');
}
},
}
};
}
babel.config.js 引入使用
const path = require('path');
module.exports = {
// ...
plugins: [
path.resolve(__dirname, "./babel/babel-plugin-replace-image"),
]
// ...
};可以手动将资源文件上传到oss或者使用脚本上传
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果