npm 包 @my-dish/packer 使用教程

本文介绍的是一个名为 @my-dish/packer 的 npm 包，它是一个前端打包工具，可以将多个 JavaScript 和 CSS 文件合并成一个文件，并进行压缩和混淆，从而减少页面加载时间。

安装

安装 @my-dish/packer 最简单的方法是使用 npm：

npm install --save-dev @my-dish/packer

安装完成后，可以在 node_modules 目录下找到 @my-dish/packer 包。然后，你就可以在你的项目中使用它了。

使用

使用 @my-dish/packer 之前，需要在项目的根目录下创建一个名为 packer.config.js 的配置文件。

module.exports = {
  input: ['./src/js/*.js', './src/css/*.css'],
  output: {
    js: 'dist/bundle.js',
    css: 'dist/bundle.css'
  }
}

上面的配置文件中，input 指定了要合并的 JavaScript 和 CSS 文件的路径，output 指定了合并后的文件的输出路径和名称。在此例中，@my-dish/packer 会将 ./src/js/ 目录下的所有 JavaScript 文件和 ./src/css/ 目录下的所有 CSS 文件合并成一个 JavaScript 文件 dist/bundle.js 和一个 CSS 文件 dist/bundle.css。

安装完成后，在你的项目中使用 @my-dish/packer 只需要在命令行中运行：

$ npx packer

然后，它就会将输入文件合并成一个文件并输出到指定的路径中。

深入了解

@my-dish/packer 还有很多配置选项，我们来看一下其中几个。

sourceMap

使用 sourceMap 选项可以生成一个 JavaScript 映射文件，它可以帮助开发者在浏览器中方便地调试合并后的代码。

module.exports = {
  input: ['./src/js/*.js', './src/css/*.css'],
  output: {
    js: 'dist/bundle.js',
    css: 'dist/bundle.css'
  },
  sourceMap: true
}

uglifyJS

使用 uglifyJS 选项可以启用 JavaScript 的压缩和混淆功能。

module.exports = {
  input: ['./src/js/*.js', './src/css/*.css'],
  output: {
    js: 'dist/bundle.js',
    css: 'dist/bundle.css'
  },
  uglifyJS: true
}

cleanCSS

使用 cleanCSS 选项可以启用 CSS 的压缩和优化功能。

module.exports = {
  input: ['./src/js/*.js', './src/css/*.css'],
  output: {
    js: 'dist/bundle.js',
    css: 'dist/bundle.css'
  },
  cleanCSS: true
}

示例代码

下面是一个完整的 packer.config.js 的示例代码：

-- -------------------- ---- -------
-------------- - -
  ------ ----------------- -------------------
  ------- -
    --- -----------------
    ---- -----------------
  --
  ---------- -----
  --------- -----
  --------- ----
-

总结

本文介绍了一个名为 @my-dish/packer 的前端打包工具，详细介绍了它的安装和使用方法，同时讲解了其中几个重要的配置选项。希望本文可以对大家学习和使用前端打包工具有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226f4