rollup打包失败报错 unresolved dependencies

82 阅读1分钟

报错原因

因为rollup只会解析相对路径,类似于如下的裸模块引入则不会有效

     import Rx from "rxjs/Rx"

包含模块

若想在打包后的代码中包含这个模块,需要告诉rollup如何找到它,我们需要使用 @rollup/plugin-node-resolve

    rollup.config.js
    import { nodeResolve } from "@rollup/plugin-node-resolve"
    
    export default {
        ...
        Plugins:[
            nodeResolve()
        ]
    }
   

外部模块

如果我们使用CDN引入第三方依赖,在打包时是不需要将依赖打包的,同时是运行中需要的外部依赖。在rollup的配置文件中配置external选项

    rollup.config.js
    export default {
        ...
        external:['Rx']
    }
    
    index.html
    ...
    <script src='https://unpkg.com/@reactivex/rxjs@version/dist/global/Rx.umd.js'>
    </script>
    <script>
        Rx.Observable.fromEvent(document, "click").subscribe(() => console.log("Clicked!"));
    </script>