时间戳

首页 > 解决方案 > 使用通过 npm 安装的 ES 模块，而不使用像 parcel/webpack 这样的模块打包器

javascript - 使用通过 npm 安装的 ES 模块，而不使用像 parcel/webpack 这样的模块打包器

问题描述

我试图了解 ES 模块和节点模块是如何协同工作的。我想使用 OpenLayers (ol)，我尝试在没有 JavaScript 模块打包器（如 parcel/webpack 或类似的）的情况下使用它。避免使用模块打包器的原因只是为了了解模块是如何工作的，以便更容易地将其集成到我的 django 应用程序中并避免另一层复杂性。但我遇到了问题，想知道是否值得花时间尝试。使用节点模块是否需要一些模块打包程序？

我的情况

我按照本教程进行操作，但我避免使用包裹。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <link rel="stylesheet" href="./node_modules/ol/ol.css">
    <style>
        #map {
            width: 400px;
            height: 250px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="module" src="./node_modules/ol/Map.js"></script>
    <script type="module" src="./node_modules/ol/View.js"></script>
    <script type="module" src="./node_modules/ol/layer/Tile.js"></script>
    <script type="module" src="./node_modules/ol/source/OSM.js"></script>
    <script type="module">
        import Map from './node_modules/ol/Map.js';
        import View from './node_modules/ol/View.js';
        import TileLayer from './node_modules/ol/layer/Tile.js';
        import OSM from './node_modules/ol/source/OSM.js';

        const map = new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 0
            })
        });
    </script>
</body>

</html>

我明白了TypeError: Error resolving module specifier: rbush。所以我猜 openlayers 很大程度上依赖于一些打包工具，没有它就无法使用。那正确吗？

标签： javascriptnode.jsnpmopenlayerses6-modules

解决方案

推荐阅读