Question

我是JavaScript的初学者，我正在尝试使用rtlcss library将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>

我相信我做错了什么，这不是图书馆问题..所以任何人都可以提供帮助？

Answer 1

这是一个节点包，正如@haakym所提到的，你应该使用NPM（节点包管理器）。有关如何安装和使用NPM的更多详细信息，请参阅Getting Started指南。

如果您想在浏览器中使用它，可以使用Browserify;它允许您通过捆绑所有依赖项来在浏览器中要求（'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>

Online Demo

不能使用javascript库将css转换为rtl

1 个答案: