Initial commit

README.md

@@ -0,0 +1,65 @@
+## Installation
+
+```bash
+$ yarn add craco-plugin-env -D
+
+# OR
+
+$ npm i craco-plugin-env -D
+```
+
+## Usage
+
+在 `craco.config.js` 文件中添加插件。
+
+```js
+const CracoEnvPlugin = require('craco-plugin-env')
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoEnvPlugin,
+      options: {
+        path: __dirname,
+        vars: {},
+      },
+    },
+  ],
+}
+```
+
+## Configuration
+
+您可以传递一个 `options` 对象来配置插件。
+
+- `options.path`
+  - _Default:_ root
+  - 用于加载 `.env` 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
+- `options.vars`
+  - _Default_: `{}`
+  - 自定义环境变量。通过 `process.env` 获取。想要了解解析环境文件规则的细节，请参考 [dotenv](https://github.com/motdotla/dotenv)。
+
+## Mode
+
+你可以在你的项目根目录中放置下列文件来指定环境变量：
+
+```
+.env                # 在所有的环境中被载入
+.env.local          # 在所有的环境中被载入，但会被 git 忽略
+.env.[mode]         # 只在指定的模式中被载入
+.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
+```
+
+你可以通过传递 `--mode` 选项参数为命令行覆写默认的模式。例如，如果你可以在构建命令中使用开发环境变量：
+
+```diff
+/* package.json */
+
+"scripts": {
+    "start": "craco start",
+    "build": "craco build",
++   "build:dev": "craco build --mode development"
+}
+```
+
+可参考 [Vue CLI](https://cli.vuejs.org/zh/guide/mode-and-env.html#模式)。

index.js

@@ -0,0 +1,53 @@
+const path = require('path')
+const dotenv = require('dotenv')
+const webpack = require('webpack')
+
+function getModeName() {
+  const index = process.argv.indexOf('--mode')
+  return process.argv[index + 1] || ''
+}
+
+function overrideCracoConfig({ cracoConfig, pluginOptions = {} }) {
+  const mode = getModeName()
+
+  const dir = pluginOptions.path || process.cwd()
+
+  const basePath = path.resolve(dir, `.env${mode ? `.${mode}` : ''}`)
+  const localPath = `${basePath}.local`
+
+  const load = envPath => {
+    try {
+      const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
+      return env.parsed
+    } catch (err) {
+      // only ignore error if file is not found
+      if (err.toString().indexOf('ENOENT') < 0) {
+        throw new Error(err.toString())
+      }
+    }
+  }
+
+  const plugin = new webpack.EnvironmentPlugin({
+    ...pluginOptions.vars,
+    ...load(basePath),
+    ...load(localPath),
+  })
+
+  const originalPlugins = cracoConfig.webpack?.plugins
+
+  if (originalPlugins) {
+    if ('add' in originalPlugins) {
+      originalPlugins.add.push(plugin)
+    } else {
+      originalPlugins.push(plugin)
+    }
+  } else {
+    cracoConfig.webpack.plugins = { add: [plugin] }
+  }
+
+  return cracoConfig
+}
+
+module.exports = {
+  overrideCracoConfig,
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "craco-plugin-env",
+  "description": "An environment plugin for craco",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/ponjs/craco-plugin-env.git",
+  "keywords": [
+    "environment",
+    "craco",
+    "create-react-app"
+  ],
+  "author": "ponjs",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ponjs/craco-plugin-env/issues"
+  },
+  "homepage": "https://github.com/ponjs/craco-plugin-env#readme",
+  "dependencies": {
+    "dotenv": "^10.0.0"
+  }
+}