ubuntu如何集成js第三方库

在Ubuntu上引入Ja vaScript第三方库，这事儿其实远比表面看起来要灵活。不管你是刚入门前端，还是想快速搭建一个实验环境，还是正在搭建一个正式项目，方法都有不少。下面就把几种主流方案拆开来讲，各取所需就好。

1. 使用npm或yarn

npm和yarn是目前最主流的Ja vaScript包管理工具，几乎成了现代前端开发的标配。它们能帮你搞定依赖的安装、版本管理、更新等琐事。

安装Node.js和npm

在此之前，需要先装好Node.js和npm。Ubuntu下操作非常简单：

sudo apt update
sudo apt install nodejs npm

用npm安装库

比如装个jQuery，一行命令搞定：

npm install jquery

用yarn安装库

如果你偏好yarn，先装yarn，之后同样简单：

sudo apt install yarn
yarn add jquery

这两种方式本质上是把库下载到本地node_modules目录，然后通过模块导入或构建工具来使用。

2. 直接使用CDN

如果你只想快速试个库，不想在本地安装任何东西，CDN是最省心的办法。把下面的代码插到HTML文件里，jQuery就全局可用了：

这种方式的好处是零配置、加载快（利用CDN缓存），缺点是不能离线使用，而且不利于代码的模块化管理。

3. 使用Webpack或Parcel

当项目规模变大，需要管理多个依赖、异步加载、代码分割时，构建工具就派上用场了。Webpack和Parcel是其中两个典型代表。

Webpack

先装Webpack和Webpack CLI：

npm install --sa ve-dev webpack webpack-cli

然后创建一个webpack.config.js配置文件，指定入口和出口：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在src/index.js里用ES Module方式引入库：

import $ from 'jquery';

$(document).ready(function() {
  console.log('jQuery is working!');
});

最后运行打包命令：

npx webpack

Parcel

Parcel号称零配置，用起来更直接。先安装：

npm install --sa ve-dev parcel-bundler

在package.json里加一个启动脚本：

{
  "scripts": {
    "start": "parcel index.html"
  }
}

在index.html里直接引入你的库和入口JS文件：

然后运行 npm start，Parcel会自动处理依赖、打包，并启动一个开发服务器。

4. 使用Bower

Bower曾经是前端包管理的首选，现在虽然热度大减，但在一些老项目里还能见到。如果非要碰它，也可以这么来：

安装Bower

sudo npm install -g bower

安装库

bower install jquery --sa ve

在HTML中引入

Bower会把库下载到bower_components目录，然后手动引入：

不过说实话，Bower已经逐渐被npm和yarn替代，新项目建议直接跳过它。

总结一下：临时测试用CDN，单文件小项目用npm安装后手动引入，中等规模项目用Parcel省心，大型复杂项目上Webpack。根据你的实际场景选最顺手的那条路就好。