Ubuntu如何使用Node.js进行前端构建

在 Ubuntu 上使用 Node.js 进行前端构建

一 环境准备

• 安装 Node.js 与 npm（两种常用方式，择一即可）
  • 使用 NodeSource 安装 LTS 版本（推荐）：

    curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
    sudo apt-get install -y nodejs
    

  • 使用 nvm（便于多版本管理）：

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
    # 重新加载 shell 后
    nvm install --lts
    nvm use --lts
    

• 验证安装：

  node -v
  npm -v
  

• 可选：切换为国内镜像源以加速依赖安装

  npm config set registry https://registry.npm.taobao.org
  # 查看
  npm config get registry
  # 还原
  npm config set registry https://registry.npmjs.org/
  

以上步骤完成后，即可在 Ubuntu 上具备前端构建所需的 Node.js/npm 环境。

二 初始化项目与安装依赖

• 创建并进入项目目录：

  mkdir my-frontend &
      &
       cd $_
  npm init -y
  

• 安装常用构建相关依赖（示例）：

  npm i -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env sass sass-loader css-loader style-loader html-webpack-plugin
  

• 目录约定示例：

  my-frontend/
  ├─ src/
  │  ├─ index.js
  │  └─ style.scss
  ├─ public/
  │  └─ index.html
  ├─ webpack.config.js
  └─ package.json
  

上述依赖覆盖 打包（Webpack）、转译（Babel）、样式预处理（Sass） 与 开发服务器（webpack-dev-server） 等常见前端构建能力。

三 配置与常用命令

• 示例 webpack.config.js（开发与生产共用的基础配置）

  const path = require('path');
      
  const HtmlWebpackPlugin = require('html-webpack-plugin');
      
  
  module.exports = (env, argv) =>
   {
      
    const isProd = argv.mode === 'production';
  
    return {
  
      entry: './src/index.js',
      output: {
  
        path: path.resolve(__dirname, 'dist'),
        filename: isProd ? '[name].[contenthash].js' : '[name].js',
        clean: true,
      }
  ,
      module: {
  
        rules: [
          {
  
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
   loader: 'babel-loader', options: {
   presets: ['@babel/preset-env'] }
   }
  ,
          }
  ,
          {
  
            test: /\.s[ac]ss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
          }
  ,
        ],
      }
  ,
      plugins: [new HtmlWebpackPlugin({
   template: './public/index.html' }
  )],
      devServer: isProd
        ? undefined
        : {
  
            static: {
   directory: path.join(__dirname, 'public') }
  ,
            port: 3000,
            hot: true,
            open: true,
          }
  ,
    }
      ;
  
  }
      ;
  
  

• 在 package.json 中添加脚本：

  {
  
    "scripts": {
  
      "dev": "webpack serve --mode development",
      "build": "webpack --mode production"
    }
  
  }
      
  

• 常用命令：

  # 开发：启动本地服务（默认端口 3000）
  npm run dev
  
  # 生产：生成优化后的静态文件到 dist/
  npm run build
  

该配置示例展示了使用 Webpack 进行模块打包、使用 Babel 转译 ES6+、使用 Sass 处理样式，并通过 HtmlWebpackPlugin 生成 HTML 入口；开发阶段启用 webpack-dev-server 的热更新能力。

四 生产部署与自动化

• 使用 Nginx 托管静态资源
  • 将构建产物 dist/ 部署到 /var/www/myapp，配置 Nginx：

    sudo apt-get install -y nginx
    sudo rm -f /etc/nginx/sites-enabled/default
    sudo tee /etc/nginx/sites-available/myapp <
        <
    'EOF'
    server {
        
      listen 80;
        
      server_name your-domain.com;
        
      root /var/www/myapp;
        
      index index.html;
    
      location / {
        
        try_files $uri $uri/ /index.html;
    
      }
    
    }
        
    EOF
    sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
    sudo nginx -t &
        &
         sudo systemctl reload nginx
    

• 使用 Jenkins 实现自动化构建与发布
  • 在 Jenkins 中安装 NodeJS 插件，在“全局工具配置”里添加 Node.js 安装；
  • 新建任务 → 源码管理选择 Git → 构建环境勾选 Provide Node & npm bin/ folder to PATH；
  • 构建步骤执行：

    npm ci
    npm run build
    tar -zcf dist.tar.gz -C dist .
    

  • 构建后操作使用 Publish Over SSH 将 dist.tar.gz 传到目标服务器并解压到 /var/www/myapp，完成发布。 以上流程覆盖在 Ubuntu 上以 Nginx 托管前端静态资源，以及用 Jenkins 完成拉取代码、安装依赖、构建与发布的自动化实践。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！