Rails 5.1 webpacker无法解析模块'fs'

我是使用带有webpacker gem的rails 5.1的新手，并在尝试配置我的环境以使用bpmn-js库时解决了这个问题 . 我尝试安装'fs'，但它不起作用 . 我读过关于在其他框架上更改模块导出配置的内容，但是在rails环境中文件似乎有点不同，我不知道该怎么做 . 这些是我的文件：

package.json

{
  "dependencies": {
    "@rails/webpacker": "^3.0.0",
    "bpmn-js": "^0.22.0",
    "browserify": "^14.4.0",
    "fs": "^0.0.1-security",
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.7.1"
  },
  "scripts": {
    "dev": "./bin/webpack-dev-server"
  }
}

app/javascript/pack/application.js

import JQuery from 'jquery'
import Fs from 'fs'
import Browserify from 'browserify'
import BPMNJs from 'bpmn-js'

import modelerIndex from '../bpmn_stuff/modeler_index.js';
console.log('Hello World from webpacker')

node_modules/@rails/webpacker/package/config.js

const { resolve } = require('path')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')

const filePath = resolve('config', 'webpacker.yml')
const config = safeLoad(readFileSync(filePath), 'utf8')

module.exports = config[process.env.NODE_ENV]

node_modules/@rails/webpacker/package/index.js

/* eslint global-require: 0 */
/* eslint import/no-dynamic-require: 0 */

const Environment = require('./environment')
const { resolve } = require('path')
const { existsSync } = require('fs')

function createEnvironment() {
  const path = resolve(__dirname, 'environments', `${process.env.NODE_ENV}.js`)
  const constructor = existsSync(path) ? require(path) : Environment
  return new constructor()
}

const environment = createEnvironment()

module.exports = { environment, Environment }

config/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  dev_server:
    host: localhost
    port: 3035
    hmr: false
    https: false

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production demands on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

node_modules/@rails/webpacker/package/development

const Environment = require('../environment')
const { dev_server } = require('../config')
const assetHost = require('../asset_host')
const webpack = require('webpack')

module.exports = class extends Environment {
  constructor() {
    super()

    if (dev_server.hmr) {
      this.plugins.set('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
      this.plugins.set('NamedModules', new webpack.NamedModulesPlugin())
    }
  }

  toWebpackConfig() {
    const result = super.toWebpackConfig()
    if (dev_server.hmr) {
      result.output.filename = '[name]-[hash].js'
    }
    result.output.pathinfo = true
    result.devtool = 'cheap-eval-source-map'
    result.devServer = {
      host: dev_server.host,
      port: dev_server.port,
      https: dev_server.https,
      hot: dev_server.hmr,
      contentBase: assetHost.path,
      publicPath: assetHost.publicPath,
      clientLogLevel: 'none',
      compress: true,
      historyApiFallback: true,
      headers: {
        'Access-Control-Allow-Origin': '*'
      },
      overlay: true,
      watchContentBase: true,
      watchOptions: {
        ignored: /node_modules/
      },
      stats: {
        errorDetails: true
      }
    }
    return result
  }
}