Rails 5.1 webpacker не может разрешить модуль 'fs'

Question

Я впервые использую rails 5.1 с гемом webpacker и столкнулся с этой проблемой, пытаясь настроить свою среду для использования библиотеки 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"
  }
}

приложение / JavaScript / пакет / 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 }

конфиг / 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 / @ рельсы / webpacker / пакет / развитие

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
  }
}

Answer 1

Пакет fs в данный момент не используется и ничего не делает. Замените его использование другим подходом.

Я решил удалить fs из проекта и из application.js(единственное место, где он использовался в проекте) и заменил код другим способом для достижения той же цели. Удалить импорт:

import Fs from 'fs'

и эта строка кода, где используется fs:

var newDiagramXML = fs.readFileSync(__dirname + '/../resources/newDiagram.bpmn', 'utf-8');

И добавить:

var newDiagramXML = '<?xml version="1.0" encoding="UTF-8"?>\n'+
'<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" targetNamespace="http://bpmn.io/schema/bpmn" id="Definitions_1">\n'+
'  <bpmn:process id="Process_1" isExecutable="false">\n'+
'    <bpmn:startEvent id="StartEvent_1"/>\n'+
'  </bpmn:process>\n' +
'  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
'    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
'      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
'        <dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>\n' +
'      </bpmndi:BPMNShape>\n' +
'    </bpmndi:BPMNPlane>\n' +
'  </bpmndi:BPMNDiagram>' +
'</bpmn:definitions>';