npm包@rollup/plugin-node-resolve使用教程-JavaScript中文网-JavaScript教程资源分享门户

很多时候，前端开发人员需要用到一些JS库来实现他们的功能。这就要用到一种叫做打包工具的东西，来把这些库打包成一个JS文件。其中比较流行的打包工具有Webpack和Rollup。

今天我们来讲解一下Rollup打包工具中常用的一个插件：@rollup/plugin-node-resolve。这个插件可以帮助我们解决打包过程中处理node_modules中的模块引用。

安装

在使用@rollup/plugin-node-resolve之前，我们需要先将它安装进我们的项目中。

npm install @rollup/plugin-node-resolve --save-dev

使用步骤

在你的rollup配置文件中，引用插件。

import resolve from '@rollup/plugin-node-resolve';

在plugins数组中，初始化这个引用。

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

配置项

@rollup/plugin-node-resolve提供了一些配置项，可以让使用者根据自己的需求来进行调整。

rootDir：node_modules的查找根路径。
browser：是否支持浏览器环境。如果为true，会将package.json中“browser”字段的内容当做浏览器环境的入口，而非“main”字段。
extenstions：需要处理的文件扩展名。
preferBuiltins：是否使用node.js内置的模块作为引用。
moduleDirectory：查找模块的目录。

resolve({
    rootDir: path.resolve('.'),
    browser: true,
    extensions: ['.js', '.json', '.jsx'],
    preferBuiltins: false,
    moduleDirectory: ['node_modules']
})

案例

接下来，我们来看一个简单的案例，如何使用@rollup/plugin-node-resolve。

创建一个 main.js 文件，引用一个 jQuery 库。

import $ from 'jquery';
console.log($);

新建rollup.config.js文件，配置如下。

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

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

在终端中，运行rollup打包命令：

rollup -c rollup.config.js

这时，我们就可以在 dist/bundle.js 文件中看到已经将jquery库打包进来了。

结语

@rollup/plugin-node-resolve插件是Rollup打包工具中非常重要的一个插件。通过这篇文章，你已经学习了该插件的基本使用方法和常用的配置项，相信你已经可以在实际开发中应用它了。

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