2

私は JavaScript の初心者で、rtlcss ライブラリを使用して css ファイルを ltr から rtl に変換しようとしています。このコードを使用していますが、2 つのエラーが表示されます。

Uncaught SyntaxError: Illegal return statement
Uncaught ReferenceError: require is not defined

私のコード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>convert css to rtl</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/rtlcss/src/rtlcss.js"></script>
</head>
<body>
    <textarea id="source_textarea" placeholder="place your css" ></textarea>
    <button id="convert_btn">Convert</button>
    <textarea id="result_textarea"></textarea>
    <script>
        (function myfunction() {
            rtlcss = require('rtlcss');
            var output = rtlcss.process('css/main.css');
            console.log(output);
            $("#result_textarea").val(output);
        })();
    </script>
</body>
</html>

私は何か間違ったことをしていると思います。それはライブラリの問題ではありません..誰でも助けてもらえますか?

4

1 に答える 1

1

@haakym が述べたように、これはノード パッケージです。NPM (ノード パッケージ マネージャー) を使用する必要があります。NPM のインストール方法と使用方法の詳細については、入門ガイドに従ってください。

ブラウザーで使用する場合は、Browserifyを使用できます。すべての依存関係をまとめることで、ブラウザーで require('modules') することができます。

node/npm のセットアップが完了したら、次の手順を実行します。

  • コマンド ラインから次のコマンドを実行して、RTLCSSとBrowserifyをインストールします。

    npm install rtlcss
npm install -g browserify

  • 次の内容でファイルを作成し、名前を付けて保存します main.js。

    rtlcss = require('rtlcss');

  • 次のコマンドを実行して、ブラウザーで使用可能なバンドルを作成します。

    browserify main.js -o bundle.js

  • 結果のスクリプトをページに含めます。

    <script src="bundle.js"></script>

以上で、ブラウザで使用できるようになります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>convert css to rtl</title>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="bundle.js"></script>   
</head>
<body>
    <textarea id="source_textarea" placeholder="place your css" ></textarea>
    <button id="convert_btn">Convert</button>
    <textarea id="result_textarea"></textarea>
    <script>
    $('button').click(function(){
      var output = rtlcss.process($('#source_textarea').val());
      $("#result_textarea").val(output);
    });
    </script>
</body>
</html>

オンラインデモ

于 2015-02-04T11:00:45.057 に答える