1. 简介
browserify-cdn 是一个公共 CDN 托管的 browserify 模块，它提供了一种打包模块的方式，可以让你使用 npm 包在浏览器端运行。它通过构建一个可以在浏览器端直接使用的 bundle 来实现这个功能。本文将介绍 browserify-cdn 的安装和使用。
2. 安装
使用 browserify-cdn 需要先安装 node.js 和 npm。在命令行中输入以下命令进行安装：
npm install -g browserify-cdn
3. 使用
3.1 创建项目
首先，我们需要新建一个项目。在命令行中，输入以下命令：
mkdir myproject cd myproject npm init
此时，会在当前目录下新建一个名为 myproject 的目录，并在其中创建一个空的 package.json 文件。接下来，我们需要安装一些依赖。
3.2 安装依赖
在命令行中，输入以下命令安装依赖：
npm install react react-dom browserify watchify browserify-cdn --save
这个命令会自动安装 react, react-dom, browserify, watchify, 和 browserify-cdn，并把它们添加到 package.json 中。
3.3 创建一个入口文件
在 myproject 目录下创建一个名为 index.js 的文件，并添加以下内容：
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);这个文件将会渲染一个标题 "Hello, world!"。
3.4 创建 HTML 文件
在 myproject 目录下创建一个名为 index.html 的文件，并添加以下内容：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- --------------- ------- ------ ---- ---------------- ------- ------------------------- ------- -------
这个文件中包含了一个空的 div 和一个 script 标签。script 标签的 src 属性指向 bundle.js，这个文件是我们要通过 browserify-cdn 打包出来的。
3.5 修改 package.json
在 package.json 文件中添加以下内容：
-- -------------------- ---- -------
-
------- ------------
---------- --------
---------- -
-------- --------- -------- -- -----------
-------- -------------
--
--------------- -
----------------- ---------
-------- ----------
------------ ---------
--
------------------ -
------------- ----------
----------- --------
-
-这个文件中包含了一个 build 命令和一个 start 命令。build 命令使用 watchify 监听 index.js 文件的变化，并将它打包成一个名为 bundle.js 的文件。start 命令使用 http-server 开启一个本地服务器。
3.6 打包和运行
在命令行中输入以下命令：
npm run build
这个命令会打包 index.js 并生成 bundle.js。
接下来，在命令行中输入以下命令：
npm run start
这个命令会开启一个本地服务器，并在浏览器中打开 index.html。此时，你应该能看到一个包含 "Hello, world!" 的标题的网页。
4. 总结
使用 browserify-cdn，我们可以很方便地在浏览器中使用 npm 包。这个工具不仅使用简单，而且还可以节省开发时间。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/85271