Nodejs在web执行的问题

Nodejs在web执行的问题

搭了node环境，配置 uglify-js 和 clean-css，引用了这两个node module，实现js/css的压缩合并。。 目前能在用node xxx.js 执行压缩。 现在想在web里面执行自动压缩。。 比如，给一个click 事件，然后执行xxx.js里面的压缩函数。。 环境是win7， 请教下 有什么方法可以实现？

6 回复

要在Web环境中实现点击事件触发JavaScript/CSS压缩的功能，我们需要创建一个Web服务器来处理HTTP请求，并在接收到请求时调用相应的压缩函数。这里我们将使用Node.js和Express框架来搭建服务器，并使用uglify-es（用于ES6+的UglifyJS）和clean-css来实现压缩功能。

步骤1: 安装必要的依赖

首先，确保你已经安装了Node.js和npm。接下来，在你的项目目录中初始化一个新的Node.js项目，并安装所需的包：

npm init -y
npm install express body-parser uglify-es clean-css

步骤2: 创建服务器

创建一个名为server.js的文件，并添加以下代码来设置基本的Express服务器：

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const UglifyJS = require("uglify-es");
const CleanCSS = require('clean-css');

const app = express();
app.use(bodyParser.json());

app.post('/compress', (req, res) => {
    const { type, content } = req.body;

    let result;
    if (type === 'js') {
        const minified = UglifyJS.minify(content);
        result = minified.code || '';
    } else if (type === 'css') {
        result = new CleanCSS().minify(content).styles;
    }

    res.send(result);
});

app.listen(3000, () => console.log('Server running on port 3000'));

这段代码创建了一个简单的服务器，它监听POST请求到/compress路径。根据请求中的类型参数(js或css)，它会压缩相应的文本内容并返回结果。

步骤3: 创建前端页面

为了测试，你可以创建一个简单的HTML文件，例如index.html，包含一个按钮来发送请求：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Compress Test</title>
</head>
<body>
<button id="compressButton">Compress JS/CSS</button>
<script>
document.getElementById('compressButton').addEventListener('click', async () => {
    const response = await fetch('http://localhost:3000/compress', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({type: 'js', content: `console.log('Hello World');`})
    });
    const result = await response.text();
    console.log(result); // 输出压缩后的代码
});
</script>
</body>
</html>

当你点击按钮时，它会向服务器发送一个POST请求，包含要压缩的JS代码。服务器将响应压缩后的代码。

通过这种方式，你可以在Web环境中实现点击事件触发自动压缩的功能。


看不懂问题。。

xxx.js 中有个函数 a() 引用了uglify-js 和 clean-css，执行js/css的压缩合并， 目前可以通过 cmd指令 node xxx.js执行。。 我想在普通的web页面中执行， 如： 在button中添加事件 onclick=“a()” 来执行xxx.js中的函数a() 。。而不用通过cmd的指令执行。

点按钮，发送一个HTTP请求到后台，NODE接受到请求在支持你需要的模块不就好了吗？

不知道能不能通过 browserify 实现…有空试试

要在Web端实现点击事件触发JavaScript/CSS的压缩功能，你可以使用客户端的JavaScript来实现这个需求。由于uglify-js和clean-css这类库主要是为Node.js设计的，无法直接在浏览器中运行，但你可以考虑使用其他客户端库或者服务端渲染的方式。

客户端方案

客户端方案是指在用户浏览器中直接执行压缩操作。可以使用一些客户端库，如terser（用于压缩JavaScript）和csso（用于压缩CSS）。不过这些工具的压缩能力可能不如服务器端的版本强大，但可以在浏览器环境中运行。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compress JS/CSS</title>
    <script src="https://cdn.jsdelivr.net/npm/terser/dist/terser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/csso@4.1.10/lib/index.min.js"></script>
</head>
<body>

<button id="compressBtn">Click to Compress</button>

<script>
document.getElementById('compressBtn').addEventListener('click', function() {
    // 假设这里有一个textarea用于输入JS代码
    const inputJsCode = document.querySelector('#inputJsCode').value;
    
    // 使用terser进行压缩
    terser.minify(inputJsCode, { compress: true }).then(result => {
        if (result.error) {
            console.error("Error during compression:", result.error);
        } else {
            console.log("Minified JS code:", result.code);
        }
    });

    // CSS压缩
    const inputCssCode = document.querySelector('#inputCssCode').value;
    const minifiedCss = csso.minify(inputCssCode).css;
    console.log("Minified CSS code:", minifiedCss);
});
</script>

<!-- 添加两个textarea供用户输入JS和CSS代码 -->
<textarea id="inputJsCode" rows="10" cols="50"></textarea>
<textarea id="inputCssCode" rows="10" cols="50"></textarea>

</body>
</html>

服务端方案

如果你希望在服务器端处理压缩请求，那么可以使用Express等框架来创建一个简单的API，客户端发送请求到该API，由服务端执行压缩任务，并将结果返回给客户端。

示例代码：

服务端代码（server.js）

const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');
const { minify } = require('terser');
const csso = require('csso');

app.use(express.json());

app.post('/compress', async (req, res) => {
    try {
        const jsCode = req.body.js;
        const cssCode = req.body.css;

        const minifiedJs = await minify(jsCode);
        const minifiedCss = csso.minify(cssCode);

        res.json({
            js: minifiedJs.code,
            css: minifiedCss.css
        });
    } catch (error) {
        res.status(500).send({ error: error.message });
    }
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

客户端代码（HTML文件）

<button onclick="compress()">Click to Compress</button>

<script>
async function compress() {
    const jsCode = 'console.log("Hello World!");'; // 示例JS代码
    const cssCode = '.example{ color:red; }'; // 示例CSS代码
    
    const response = await fetch('http://localhost:3000/compress', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ js: jsCode, css: cssCode })
    });

    const data = await response.json();
    console.log('Minified JS:', data.js);
    console.log('Minified CSS:', data.css);
}
</script>

这样，当用户点击按钮时，会触发一个AJAX请求，将JS和CSS代码发送到服务器进行压缩，然后服务器将结果返回给客户端显示。

回到顶部