babel-plugin-import-env

|联系方式|[email protected] |---|---

安装

npm i babel-plugin-import-env

使用

module.exports = {
  plugins: [["import-env", { intercepts: [".less", ".js", ".vue"] }]],
};

• intercepts 你想要拦截的文件类型
• .env配置

VUE_APP_ENV = elderly

效果

import "./styles/common.less";

经过插件编译会在common.less文件夹中查找是否存在 common.elderly.less 文件，如果存在该文件会经由插件编译成

import "./styles/common.elderly.less";

如果不存在common.elderly.less 文件，会保持对当前文件的引用

注意点

• 由于插件采用了文件比对的方式故目前只支持全路径引用

• 由于babel-cli会对正确的路径引用操持缓存，故建议您在使用插件时候对package.json进行以下配置

 "scripts": {
    "serve": "npm run clear:babel-cache && vue-cli-service serve --mode development",
    "serve:elderly": "npm run clear:babel-cache && vue-cli-service serve --mode elderly",
    "clear:babel-cache": "rm -rf ./node_modules/.cache/babel-loader/*"
  },