原生js的打包方法

在前端开发中，原生 JavaScript 代码往往需要进行打包处理，以优化性能、提升加载速度并便于管理。下面就来详细探讨原生 JS 的打包方法。

首先是 Webpack。Webpack 是当下最流行的模块打包工具之一。使用它，需要先初始化项目，在项目目录下运行 npm init -y 生成 package.json 文件。接着安装 Webpack 和 Webpack CLI，命令为 npm install webpack webpack - cli --save - dev。

配置 Webpack 也很关键。在项目根目录创建 webpack.config.js 文件，在这个文件中，你可以定义入口(entry)和出口(output)。例如：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

这里将 src/index.js 作为入口文件，打包后的文件输出到 dist/bundle.js。Webpack 还支持各种 loader，比如处理 CSS 的 css - loader 和 style - loader，处理图片的 file - loader 等，极大地丰富了打包的功能。

其次是 Rollup。Rollup 专注于 JavaScript 模块的打包，对于原生 JS 项目十分友好。安装命令为 npm install rollup --save - dev。 Rollup 的配置文件是 rollup.config.js，基本配置如下：

export default {
    input: 'input.js',
    output: {
        file: 'output.js',
        format: 'iife'
    }
};

这里 input.js 是入口文件，output.js 是输出文件，iife 格式表示立即执行函数表达式，适用于浏览器环境。Rollup 在处理 ES6 模块方面表现出色，能够高效地将模块打包成一个或多个文件。

还有 Browserify。它能让你在浏览器环境中使用 Node.js 的模块系统。安装命令是 npm install browserify --save - dev。使用时，在命令行运行 browserify main.js - o bundle.js，main.js 是入口文件，bundle.js 是打包后的输出文件。

原生 JS 的打包方法多样，Webpack 功能全面、Rollup 专注模块、Browserify 衔接 Node 与浏览器。开发者可根据项目需求和规模，合理选择打包工具，优化项目的性能与可维护性，为用户带来更流畅的体验。