无法使用 javascript 库将 css 转换为 rtl答案

【问题标题】：can't covert css to rtl using javascript library无法使用 javascript 库将 css 转换为 rtl
【发布时间】：2014-12-23 09:05:24
【问题描述】：

我是 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>

我相信我做错了什么，这不是图书馆的问题..所以有人可以帮忙吗？

【问题讨论】：

你明白错误的意思吗？
好吧，我也没有，但我认为你不能使用require- 这是因为浏览器/客户端 JavaScript 中不存在 require()。来自链接：stackoverflow.com/questions/19059580/…
我只是简单地查看了库，但我认为您不会在客户端使用它
@haakym 那么，我该如何使用它？
看看Node JS，你应该使用NPM（节点包管理器）来安装RTLCSS。我认为该库会转换文件，而不是在浏览器中即时进行。

标签： javascript rtlcss

【解决方案1】：

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

如果要在浏览器中使用，可以使用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>

Online Demo

【讨论】：