从入门到精通：剖析Rollup打造生产质量代码的秘诀

2023-12-03 00:16:39

Rollup进阶之旅：打造生产质量代码

在前面两节中，我们对Rollup有了初步的认识，并了解了如何使用它来构建项目和打包开发环境下的代码。现在，我们准备进一步探索Rollup，学习如何使用它来构建生产环境下的代码。

从头开始构建Rollup项目

首先，我们需要创建一个新的Rollup项目。您可以使用以下命令来创建一个新的项目：

npm init -y

这将创建一个名为package.json的文件，其中包含项目的基本信息。接下来，我们需要安装Rollup：

npm install rollup -D

这将在您的项目的devDependencies中安装Rollup。

配置Rollup

接下来，我们需要配置Rollup。为此，我们需要创建一个rollup.config.js文件。这个文件将告诉Rollup如何构建我们的项目。

// rollup.config.js
import rollupPluginNodeResolve from '@rollup/plugin-node-resolve';
import rollupPluginCommonjs from '@rollup/plugin-commonjs';
import rollupPluginTerser from '@rollup/plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'umd',
    name: 'MyApp'
  },
  plugins: [
    rollupPluginNodeResolve(),
    rollupPluginCommonjs(),
    rollupPluginTerser()
  ]
};

这个配置文件告诉Rollup从src/main.js开始构建项目，并将输出文件保存到dist/main.js。它还指定了输出文件的格式为umd，并使用了MyApp作为全局变量的名称。最后，它还添加了三个插件：

rollup-plugin-node-resolve：这个插件允许Rollup解析Node.js模块。
rollup-plugin-commonjs：这个插件允许Rollup解析CommonJS模块。
rollup-plugin-terser：这个插件允许Rollup对输出文件进行压缩。

构建项目

现在，我们可以使用以下命令来构建项目：

rollup -c

这将使用我们刚刚创建的rollup.config.js文件来构建项目。构建完成后，您将在dist目录中找到main.js文件。

使用Rollup构建生产质量代码

现在，我们已经了解了如何使用Rollup构建项目，我们就可以开始使用它来构建生产质量代码了。为了做到这一点，我们需要对rollup.config.js文件进行一些修改。

首先，我们需要将output.format属性的值改为'iife'。这将告诉Rollup将输出文件构建为一个立即执行的函数表达式(IIFE)。

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'iife',
    name: 'MyApp'
  },
  plugins: [
    rollupPluginNodeResolve(),
    rollupPluginCommonjs(),
    rollupPluginTerser()
  ]
};

接下来，我们需要将rollup-plugin-terser插件的compress属性的值改为true。这将告诉Rollup对输出文件进行压缩。

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'iife',
    name: 'MyApp'
  },
  plugins: [
    rollupPluginNodeResolve(),
    rollupPluginCommonjs(),
    rollupPluginTerser({
      compress: true
    })
  ]
};

最后，我们需要将rollup-plugin-terser插件的mangle属性的值改为true。这将告诉Rollup对输出文件中的变量和函数进行混淆。

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'iife',
    name: 'MyApp'
  },
  plugins: [
    rollupPluginNodeResolve(),
    rollupPluginCommonjs(),
    rollupPluginTerser({
      compress: true,
      mangle: true
    })
  ]
};

现在，我们可以使用以下命令来构建项目：