第一次使用rollup

1,326 阅读1分钟

这两天有一个需求,需要将一个方法进行分装(js),然后看着rollup官网的文档,一路走下来还是报错,绝望;后来找到了一个大神的简书;一步一步下来,最终我在文件中引入了;

注意:

页面中你有可能会遇到的很多报错的问题,然后可以先跟着 _liuz大佬来做一遍,之后你做的时候会明白很多:

Rollup.js之一:介绍

Rollup.js之二:创建第一个包

Rollup.js之三: 使用配置文件

Rollup.js之四:npm run build

Rollup.js之五:使用插件

Rollup.js之六:使用npm包

Rollup.js之七: 使用babel

报错有可能遇到的问题及解决方法的链接:

webpack 打包json文件,报 Unexpected token, expected ";"错误解决方案

.Babel 7.0.0-beta.56 has dropped support for the ‘helpersNamespace’ utility.

.babelrc ignore忽略js无效(我报错的是json文件,可以将忽略的js文件修改为json文件)

Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)

rollup打包js代码

先来看看最后生成的文件目录:

1. 初始化:

首先在项目中:npm init生成项目中的package.json文件;(有一些依赖是之后下载的)

2. 设置rollup.config.js

3. 执行npm run build

就可以生成dist下的index.js文件;(注意生成的文件是有作用域的,所以对于创建的变量直接挂载在window上,然后在html中直接可以引入文件)