devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Nodejs原生实现开发生产环境编译打包_node build

作者：不正经 | 2024-03-27 14:54:50

赞

踩

node build

一、创建项目结构

1.创建根目录

创建项目名为node-builder的文件夹

2.创建业务源码

1.在根目录下创建src文件夹
2.在src目录下创建index.html、css/index.css、js/index.js、img/logo.svg

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>node-builder</title>
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<header>
	    <div class="container">
	        <div id="logo">
	            <img src="./img/logo.svg" alt="node.js" />
	        </div>
	    </div>
	</header>
	<main>
	    <p>您将要跳转的地址是：APP_BASE_URL</p>
	    <button>点击跳转</button>
	</main>
	<script src="./js/index.js"></script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

css/index.css

body {
    margin: 0;
}

header {
    padding: 15px;
    background-color: #333;
    text-align: center
}

header>.container {
    overflow: visible
}

#logo {
    display: block;
    border: none
}

#logo:hover {
    background-color: transparent;
    text-decoration: underline
}

#logo img {
    display: block;
    margin: .5em auto 0;
    border: none;
    max-height: 75px;
    max-width: 180px
}

main {
    padding: 100px;
    text-align: center;
    font-size: 36px;
}

button {
    font-size: 32px;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

js/index.js

const btnEle = document.querySelector('button');
btnEle.addEventListener('click', () => {
    window.location.href = 'APP_BASE_URL';
})

  • 1
  • 2
  • 3
  • 4

img/logo.svg
下载地址：http://static.nodejs.cn/_static/img/logo.svg

3.创建环境配置文件

在项目根目录下创建.env.developmen和.env.production文件

.env.developmen

NODE_ENV=development
APP_BASE_URL=http://127.0.0.1

  • 1
  • 2

.env.production

NODE_ENV=production
APP_BASE_URL=http://www.lihefei.com

  • 1
  • 2

二.初始化项目，安装依赖模块

1.初始化项目

在node-builder目录下终端执行命令初始化

npm init -y

  • 1
2.安装依赖模块

dotenv：配置node环境变量
mime-types：获取文件Content-Type类型

npm install dotenv mime-types -S

  • 1

三、创建打包程序

1.在根目录下创建build文件夹
2.在build目录下创建index.js

index.js 编译打包片段

const fs = require('fs'); //文件模块
const path = require('path'); //系统路径模块
const dotenv = require("dotenv"); // 环境变量加载工具

const args = process.argv; // 获取node命令参数
const envPath = (args.length > 3 && args[2] === '--mode' && args[3]) ? ('.env.' + args[3]) : '.env.production'; // 环境配置路径名
dotenv.config({ path: envPath }); // 加载配置文件

console.log(process.env.APP_BASE_URL)

/**
 * 编译打包
 * @param {*} options.replace.oldContent 原始内容
 * @param {*} options.replace.newContent 新内容
 * @param {*} options.sourceDir 源码路径(相对当前文件目录)
 * @param {*} options.outputDir 输出路径(相对当前文件目录)
 * @param {*} options.suffix 需要编译的文件格式(多个格式中间以|分隔)
 */
function compileBuilder(options) {
    const defaults = {
        replace: {
            oldContent: '',
            newContent: ''
        },
        sourceDir: '../src',
        outputDir: '../dist',
        suffix: ''
    }
    const settings = Object.assign({}, defaults, options);
    const outputDir = path.join(__dirname, settings.outputDir); //输出文件夹
    const sourceDir = path.join(__dirname, settings.sourceDir); //源代码文件夹

    // 删除文件或文件夹
    deleteFileSync(outputDir);
    // 复制文件或文件夹
    copyFileSync(sourceDir, outputDir, (filePath) => {
        const { suffix } = settings;
        const { oldContent, newContent } = settings.replace;

        // 替换文件内容
        replaceFileSync(filePath, oldContent, newContent, suffix);
    });
}

/**
 * 同步复制文件或文件夹
 * @param {String} fromPath 源始路径，参数可以是文件或文件夹
 * @param {String} toPath 目标路径，参数可以是文件或文件夹
 * @param {Function} cb 复制完文件(非文件夹)后执行的方法
 */
function copyFileSync(fromPath, toPath, cb) {
    try {
        fs.accessSync(toPath);
    } catch (err) {
        fs.mkdirSync(toPath)
    }

    const filenames = fs.readdirSync(fromPath);
    filenames.forEach((filename) => {
        const newFromPath = path.join(fromPath, filename);
        const newToPath = path.join(toPath, filename);
        const stat = fs.statSync(newFromPath);

        if (stat.isFile()) {
            fs.copyFileSync(newFromPath, newToPath);
            cb && cb(newToPath);
        }
        if (stat.isDirectory()) {
            copyFileSync(newFromPath, newToPath, cb);
        }
    })
}

/**
 * 同步替换文件内容
 * @param {String} filePath 文件路径
 * @param {*} oldContent 原始内容
 * @param {*} newContent 新内容
 * @param {String} suffix 后缀名，多个中间以|分隔
 */
function replaceFileSync(filePath, oldContent, newContent, suffix) {
    // 文件存在且类型是文件
    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile() && oldContent && newContent) {
        // 获取路径后缀并去除前面的点
        let ext = path.extname(filePath);
        ext = ext ? ext.slice(1) : '';

        // 如果没有指定后缀，或者指定了后缀且匹配路径后缀，执行替换
        if (!suffix || (suffix.includes(ext))) {
            const data = fs.readFileSync(filePath); // 读取文件
            const content = data.toString().replace(oldContent, newContent); // 将原始内容替换为新内容
            fs.writeFileSync(filePath, content); // 写入文件
        }
    }
}

/**
 * 同步删除文件或文件夹
 * @param {String} filePath 文件路径，参数可以是文件或文件夹
 */
function deleteFileSync(filePath) {
    // 检测文件是否存在
    if (fs.existsSync(filePath)) {
        // 检测文件是目录
        if (fs.statSync(filePath).isDirectory()) {
            // 获取目录内所有文件名
            const filenames = fs.readdirSync(filePath);
            filenames.forEach((filename) => {
                const currentPath = path.join(filePath, filename);
                if (fs.statSync(currentPath).isDirectory()) {
                    deleteFileSync(currentPath);
                } else {
                    fs.unlinkSync(currentPath);
                }
            });
            fs.rmdirSync(filePath);
        } else {
            fs.unlinkSync(filePath);
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121

index.js 静态服务器片段

/**
 * 静态服务器
 * @param {String} options.hostname 主机
 * @param {Number} options.port 端口
 * @param {String} options.root 静态资源目录
 * @param {String} options.index 入口页面
 * @param {Boolean} options.gzip 是否开启gzip压缩
 * @param {String} options.compress 指定压缩的文件格式(多个格式中间以|分隔)
 * @param {Boolean} options.openBrowser 自动打开默认浏览器
 */
function staticServer(options) {

    const http = require('http');
    const url = require('url');
    const zlib = require('zlib');
    const mime = require('mime-types');

    const defaults = {
        hostname: 'localhost',
        port: 80,
        root: '../dist',
        index: 'index.html',
        gzip: true,
        compress: 'html|css|js',
        openBrowser: false
    }

    const settings = Object.assign({}, defaults, options); // 合并配置

    const rootPath = path.join(__dirname, settings.root); // 获取静态根目录路径

    //创建服务程序
    const server = http.createServer((request, response) => {

        let pathname = url.parse(request.url).pathname; //获得请求url路径
        const filePath = path.join(rootPath, pathname.slice(-1) === '/' ? settings.index : pathname); // 如果url是/，默认加载index页面

        // 检测文件是否存在
        if (fs.existsSync(filePath)) {
            try {
                const mimeType = mime.lookup(filePath); //读取文件mime类型
                response.setHeader("Content-Type", mimeType || 'text/plain');

                const raw = fs.createReadStream(filePath); // 以流的形式读取文件
                const ext = path.extname(filePath).slice(1); // 获得文件扩展名
                const acceptEncoding = request.headers['accept-encoding'];
                const gzipExt = settings.gzip && settings.compress.includes(ext); // 开启了gzip压缩，且文件类型在压缩格式范围内

                if (gzipExt && acceptEncoding.includes('gzip')) {
                    response.writeHead(200, "Ok", { 'Content-Encoding': 'gzip' });
                    raw.pipe(zlib.createGzip()).pipe(response);
                } else if (gzipExt && acceptEncoding.includes('deflate')) {
                    response.writeHead(200, "Ok", { 'Content-Encoding': 'deflate' });
                    raw.pipe(zlib.createDeflate()).pipe(response);
                } else {
                    response.writeHead(200, "Ok");
                    raw.pipe(response);
                }

            } catch (err) {
                response.writeHead(500, { 'Content-Type': 'text/plain' });
                response.end(err);
            }
        } else {
            //如果文件不存在返回404
            response.writeHead(404, { 'Content-Type': 'text/plain' });
            response.write("This request URL " + pathname + " was not found on this server.");
            response.end();
        }

    });

    // 打开默认浏览器
    const openDefaultBrowser = (url) => {
        const { exec } = require('child_process');
        console.log(process.platform)
        switch (process.platform) {
            case "darwin":
                exec('open ' + url);
                break;
            case "win32":
                exec('start ' + url);
                break;
            default:
                exec('xdg-open', [url]);
        }
    }

    //监听主机端口
    const { hostname, port, openBrowser } = settings;
    server.listen(port, hostname, () => {
        const url = `http://${hostname}:${port}`
        console.log(`服务器运行在 ${url}`);
        openBrowser && openDefaultBrowser(url); // 打开默认浏览器
    });
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96

index.js 调用编译打包及启动静态服务器片段

// 编译打包
compileBuilder({
    replace: {
        oldContent: 'APP_BASE_URL',
        newContent: process.env.APP_BASE_URL
    },
    sourceDir: '../src',
    outputDir: '../dist',
    suffix: 'html|css|js'
});

// 启动静态服务器
staticServer({
    hostname: '127.0.0.1',
    port: 3000,
    root: '../dist',
    index: 'index.html',
    gzip: true,
    compress: 'html|css|js',
    openBrowser: true
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

四、配置命令编译打包

1.编辑package.json文件，在scripts属性中设置build、dev命令

"scripts": {
  "build": "node build/index.js",
  "dev": "node build/index.js --mode development"
}

  • 1
  • 2
  • 3
  • 4

2.在项目根目录终端中执行dev打包命令

npm run dev

  • 1

编译打包完成后，会在根目录生成dist文件夹，同时自动启动静态服务打开浏览器展示效果
在这里插入图片描述
3.在项目根目录终端中执行build打包命令

npm run build

  • 1

打包结果与上一次打包后展示的内容不同，通过配置不同环境变量文件，实现了打包不同内容的效果
在这里插入图片描述
Github项目地址：https://github.com/lihefei/node-builder

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/324929
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号