Weexでdotenv使用時に出るエラーについて

  • vueもweexも2週間ずつ程度しか触っていない
  • フロントエンド・アプリ等の開発はほとんどした事がない
    と言う状態の人間ですが、
    weexで何かアプリを作ってみようかと考えています。
    その際に、
require('dotenv').config({path: '@/components/.env'})

としてdotenvで.envを読み込ませようかと思っているのですが、
次のようなエラーが出ます。

This dependency was not found:

* fs in ./node_modules/dotenv/lib/main.js

To install it, you can run: npm install --save fs
$ npm install --save fs

は当然、試しています。

エラーを検索したところ以下のような解決方法も見つけました。


ただ、weexではデフォルトでconfig/webpack.common.conf.js
からconfig/config.jsの中のnodeConfigurationを呼び出しており、
config/config.jsのnodeConfigurationで

fs: false,

と記述しているにも関わらずエラーが発生しているので、この方法では解決しないのだと思っております。

macOS : 10.13.3
npm -v : 5.6.0
node -v : v9.3.0
weex -v : v1.2.9
weexpack : v1.1.5
weex-builder : v0.3.14
weex-previewer : v1.4.6

でpackage.jsonはこちらです。

{
  "name": "weex_todo",
  "version": "1.0.0",
  "description": "A weex project",
  "author": "",
  "private": true,
  "scripts": {
    "start": "npm run serve",
    "build": "webpack --env.NODE_ENV=common",
    "build:prod": "webpack --env.NODE_ENV=production",
    "build:release": "webpack --env.NODE_ENV=release",
    "build:plugin": "webpack --env.NODE_ENV=plugin",
    "clean:web": "rimraf ./release/web",
    "clean:ios": "rimraf ./release/ios",
    "clean:android": "rimraf ./release/android",
    "dev": "webpack --env.NODE_ENV=common --progress --watch",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src  test/unit --fix",
    "serve": "webpack-dev-server --env.NODE_ENV=development --progress",
    "ios": "weex run ios",
    "web": "npm run serve",
    "android": "weex run android",
    "pack:ios": "npm run clean:ios && weex build ios",
    "pack:android": "npm run clean:android && weex build android",
    "pack:web": "npm run clean:web && npm run build:release"
  },
  "keywords": [
    "weex"
  ],
  "license": "MIT",
  "dependencies": {
    "dotenv-webpack": "^1.5.4",
    "firebase": "^4.10.1",
    "fs": "0.0.1-security",
    "phantom-limb": "0.0.1",
    "vue": "^2.5.11",
    "weex-vue-render": "^0.12.26"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "chai": "^4.1.2",
    "css-loader": "^0.28.8",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "fs-extra": "^5.0.0",
    "html-webpack-plugin": "^2.30.1",
    "ip": "^1.1.5",
    "karma": "^1.7.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-phantomjs-shim": "^1.5.0",
    "karma-sinon-chai": "^1.3.3",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.6",
    "node-notifier": "^5.1.2",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.9",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "script-ext-html-webpack-plugin": "^1.8.5",
    "sinon": "^4.1.3",
    "sinon-chai": "^2.14.0",
    "vue-loader": "^12.2.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.11",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7",
    "webpack-merge": "^4.1.0",
    "webpack-uglify-parallel": "^0.1.4",
    "weex-loader": "^0.6.7"
  },
  "optionalDependencies": {
    "ios-deploy": "^1.9.0"
  }
}

以上、よろしくお願いします。

fsはfile systemの略で、ファイルを読み書きするためにNodeにもともと入っているライブラリでありフロント側で使うことはできません。

このIssueによればdotenv自体がフロントで使うことを想定してないので、他の仕組みを使う必要があります。

なるほど、フロントでは使えないんですね。
調べていただき、ありがとうございます。
別の方法を模索します。

.envをプロジェクトのルート直下におけば

require('dotenv').config();

でいけると思いますよ