rollup.js配置环境变量

stubborn丶lili

已于 2023-01-13 09:59:55 修改

阅读量2k

点赞数 1

分类专栏： vue 文章标签： rollup svelte Powered by 金山文档

于 2023-01-12 18:10:03 首次发布

本文链接：https://blog.csdn.net/qq_43340606/article/details/128663805

版权

vue 专栏收录该内容

35 篇文章 3 订阅

订阅专栏

场景: 由于项目是通过svelte.js + rollup.js框架搭建起来的, 并没有使用到cli脚手架, 没有办法配置不同环境的变量

一. 使用cross-env添加环境变量

安装cross-env，它可根据不同的系统设置环境变量

npm install cross-env --save-dev

在 package.json 中：

"scripts": {
    "build": "cross-env NODE_ENV=staging rollup -c",
    "build:prod": "cross-env NODE_ENV=prod rollup -c",
    "build:qa": "cross-env NODE_ENV=qa rollup -c",
    "build:test": "cross-env NODE_ENV=test rollup -c",
    "build:stage": "cross-env NODE_ENV=staging rollup -c",
    "build:op": "cross-env NODE_ENV=op rollup -c",
    "dev:op": "cross-env NODE_ENV=op rollup -c -w",
    "dev": "cross-env NODE_ENV=development rollup -c -w",
    "start": "sirv public --no-clear -p 9527"
  },

在根目录下新建.env.xx文件, 对应每一个环境

在不同的环境中配置不同的域名

二. 使用rollup-plugin-generate-html-template生成不同环境的html

安装 :

npm install --save-dev rollup-plugin-generate-html-template

在rollup.config.js加载.env配置

import { config } from 'dotenv'
// 获取文件里面的内容
let envConfig = config({ path: "./.env."+ process.env.NODE_ENV }).parsed;

配置rollup-plugin-generate-html-template

//rollup.config.js
import htmlTemplate from 'rollup-plugin-generate-html-template';
import replace from '@rollup/plugin-replace'
import { config } from 'dotenv'
// 获取文件里面的内容
let envConfig = config({ path: "./.env."+ process.env.NODE_ENV }).parsed;
// 替换的文件名
const filename = process.env.NODE_ENV!=='staging' ? '.'+process.env.NODE_ENV : ''
...
plugins: [
    // 该方法可以存放变量
    replace({
      preventAssignment: true,
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    // 生成对应的index.html对应的入口文件
    htmlTemplate({
      template: 'public/template.html',
      target: 'public/index'+filename+'.html',
      replaceVars: envConfig,
      attrs: ['src="/build/bundle.js"', 'defer']
    }),
]