无npm权限的Apache服务器如何使用npm部署的JS库？

完全不用在服务器上部署npm！你只需要在本地把这个依赖包打包成一个可以直接在静态HTML里引用的独立脚本，就能在Apache上正常运行了。下面是具体步骤：

步骤1：本地准备打包工具 #

我推荐用rollup（轻量适合库打包）或者webpack（功能更全面），这里以rollup为例：

• 如果你本地还没初始化npm项目，先在存放该库的文件夹里执行：

  npm init -y
  

• 安装rollup和必要插件，用来处理Node.js风格的模块依赖：

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

步骤2：配置打包规则 #

在项目根目录新建一个rollup.config.js文件，内容如下（注意替换入口路径）：

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

export default {
  // 填你本地node_modules里该库的入口文件路径，比如node_modules/mapbox-gl-utils/index.js
  input: './node_modules/mapbox-gl-utils/index.js',
  output: {
    // 打包后的输出文件，会生成在dist文件夹中
    file: './dist/mapbox-gl-utils.bundle.js',
    // 输出格式选iife，适合浏览器直接引用
    format: 'iife',
    // 如果库依赖全局变量（比如mapbox-gl），在这里声明对应关系，示例：
    // globals: { 'mapbox-gl': 'mapboxgl' }
  },
  plugins: [resolve(), commonjs()]
};

如果你的库有外部依赖，记得在globals里声明，这样打包时不会把依赖也打包进去，而是直接调用全局环境里的变量。

步骤3：执行打包 #

在package.json的scripts字段中添加打包命令：

"scripts": {
  "build": "rollup -c"
}

然后执行命令完成打包：

npm run build

执行完成后，你会在dist文件夹里得到mapbox-gl-utils.bundle.js文件，这就是整合了所有必要内容的独立脚本。

步骤4：部署到Apache #

• 把生成的mapbox-gl-utils.bundle.js上传到Apache服务器的静态资源目录（比如/var/www/html/js）。
• 在你的HTML文件里引用这个脚本：

  <!-- 如果该库依赖其他全局脚本（比如mapbox-gl），请先加载对应的脚本（可以是Apache托管的本地文件） -->
  <script src="/js/mapbox-gl.js"></script>
  <script src="/js/mapbox-gl-utils.bundle.js"></script>
  

之后你就可以在HTML里正常调用这个库的API了！

内容的提问来源于stack exchange，提问作者user1249791