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 回答