Question

我尝试在浏览器中使用npm库。以npm库uniq为例，目前我们需要首先在本地编写使用uniq的代码：

// main.js
var unique = require('uniq');    
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

然后，我们需要在控制台中运行browserify：

browserify main.js -o bundle.js

现在，我们可以在html文件中使用它：

<script src="bundle.js"></script>

我的问题是，是否可以对库进行浏览，以便“script”标记内的任何代码都可以使用它。例如，在html部分中，我可能要编写< / p>

<html>
  <head>
    <script src="the_browserified_library.js"></script>
  </head>
  <body>
    <script>
       <!-- the following code may change -->
       var d = [1, 1, 2, 3];
       console.log(unique(d));
       var a = [2, 2, 4, 5];
       console.log(unique(a));
    </script>
  </body>
</html>

如果可能的话，我们不必在每次更改代码后对其进行浏览（在控制台中）。

有没有人知道浏览器是否可以通过浏览器或任何其他工具？

编辑1 ：根据@dNitro的回答，我在全球范围内安装了globalify，但后来却出错了：

/tmp/client$ globalify uniq -o uniq.js
/usr/local/lib/node_modules/globalify/node_modules/camelcase/index.js:4
    let isLastCharLower = false;
    ^^^
SyntaxError: Unexpected strict mode reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/globalify/globalify.js:7:17)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

Answer 1

所以你想要一个npm包的全局变量？！使用globalify：

安装：

npm install globalify -g

用法：

globalify uniq -o uniq.js

然后在你的HTML中：

<script src="uniq.js"></script>    
<script>
  var d = [1, 1, 2, 3];
  console.log(uniq(d));
</script>

注意您应该避免污染全局范围。以这种方式编写代码是有害的。 browserify不仅可以让您的代码浏览器准备就绪，它可以帮助您编写干净（不污染全局窗口范围），模块化（CommonJS或ES6方式）和未来证明（编写ES6并在捆绑时间进行转换）并且您的应用程序已准备就绪只有一个http请求 bundle.js 文件。

如果每次更改代码时都运行browserify，那么您可以考虑使用 watchify ;它会在您在文件中进行的每次更改时自动重建捆绑包。

浏览化库而不是文件

1 个答案:

安装：

用法：