npm 运行 dev 和 npm 运行 build 的不同 svelte 变量值

Question

我正在使用 rollup.js 开发一个 svelte+tailwind+PHP 网站。如何根据我是运行ning npm run dev 还是 npm run build 在 svelte 源文件中设置变量？我希望不同的构建连接到不同的后端服务器。

这是我的 package.json 以防相关。我对这些工具中的大多数都是新手，所以如果我误解太多，请耐心等待并纠正我。在运行ning npm run build 之后，我运行将构建文件夹的 scp 脚本发送到生产服务器。

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "dev": "run-p autobuild watch:tailwind",
    "build": "npm run build:tailwind && rollup -c",
    "start": "sirv public --single --host",
    "start:dev": "sirv public --single --dev",
    "autobuild": "rollup -c -w"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "autoprefixer": "^10.0.4",
    "d3-interpolate": "^2.0.1",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "postcss-nested": "^5.0.1",
    "postcss-reporter": "^7.0.2",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-dnd-action": "^0.6.22",
    "svelte-loading-spinners": "^0.1.1",
    "tailwindcss": "^2.0.1"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

Answer 1

您可以使用 @rollup/plugin-replace:

A Rollup plugin which replaces strings in files while bundling.

plugins: [
    replace({
      // alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]

npm 运行 dev 和 npm 运行 build 的不同 svelte 变量值

Different svelte variable value for npm run dev and npm run build

npm

svelte

rollupjs