web-dev-qa-db-ja.com

require（ 'fs'）でBrowserify

Fsオブジェクトを使用するファイルでbrowserifyを使用しようとしました。ブラウザ化すると、require('fs')の呼び出しが変換されず、requireが{}を返します。

これの回避策はありますか？私はstackoverlowや他の場所でいくつかの提案を見てきましたが、完全には実現されていないようです。

私が実際に教えているクラスのbrowserifyを使用して、グーグルウェブパッケージアプリを作成したいと思っていました。

前もって感謝します。

htmlnode.jsrequirehtml5-filesystembrowserify
28
Fred Finkle

その場合、ブラウザはどのファイルシステムを使用する必要がありますか？ HTML5ファイルシステムは、従来のファイルシステムと実際には比較できません。シンボリックリンクはなく、Webワーカーの外部から非同期でのみアクセスできます。

したがって、答えは次のとおりです。Node.jsで実行する場合はfsモジュールに依存できる抽象化レイヤーを自分で作成し、ブラウザで実行する場合はHTML5 FS APIを使用します。違いが大きすぎるため、 browserifyが翻訳してくれます。

9
Janus Troelsen

fs.readFileSync()呼び出しからファイルの内容をインライン化する場合は、 brfs を使用できます。

var fs = require('fs');
var src = fs.readFileSync(__dirname + '/file.txt');

次に行います：

browserify -t brfs main.js > bundle.js

srcは、コンパイル時にfile.txtの内容に設定されます。

44
substack

Browserifyでファイルシステムを実行する場合は、npmをインストールできます。

npm install browserify-fs

クライアント側でfsオブジェクトにアクセスできます。
ありがとう

16
Anish Agarwal

Require（fs）を使用する必要がありますか？常にhtml5ファイルリーダーapiを使用してJavaScriptでファイルを読み取ることができます。

window.onload = function() {
    var fileInput1 = document.getElementById('fileInput');
    if (fileInput1){
        fileInput1.addEventListener('change', function(e) {
            var file = fileInput1.files[0];
            var textType = /text.*/;

            if (file.type.match(textType)) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    console.log(reader.result);
                  }    
                reader.readAsText(file);                    
            } 
        });
    }
}

また、html側に入力ファイルを挿入する必要があります。

1
Akash

グーグルの誰にとっても、私は文字列化変換ではるかに幸運でした。

https://github.com/JohnPostlethwait/stringify

ここでの答えは苛立たしいものでした（歓迎すべきことではありません）。テンプレートを文字列としてコンポーネントにインポートして、templateUrlによって購入されたHTTPリクエストを保存し、JavaScriptファイルから除外しています。

何らかの理由でbrfsはbabelでうまく機能せず、まったく機能するために多くの注意事項があります。

browserify-fsをまったく動作させることができませんでした。

しかし、stringify変換を見つけた後、それは同じくらい簡単でした。

import template from '../template.html'

const definition = { template }

component.directive('myDirective', () => definition)

ES5ユーザー向けに翻訳：

var template = require('../template.html')

component.directive('myDirective', function() {
    return {
        template: template
    }
})
0
Richard Vanbergen