问题引入#

直接在浏览器环境下使用require导入包, 会报错require is not defined

使用import导包也会报错, Cannot use import statement outside a module

必须在脚手架环境下经过编译才行吗? No, 这时候browserify就派上用场了.

使用#

全局安装

1
npm i browserify -g

将js文件编译为可直接在浏览器下使用的js，就是会把require中的包编译进来，就可以直接引入使用了

1
2
# 将当前目录下的other.js 编译为 index.js
browserify .\other.js -o .\index.js

在html中导入使用

1
<script src=".\index.js"></script>

或者直接使用npx, 则无需全局安装

1
npx browserify .\other.js -o .\index.js

CDN#

  • 通常在npm下载的包，也可以使用cdn方式引入，比使用browserify更方便。

  • 比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <script> // 即使加上type="module", import也并不会工作, 路径, 导出方式不对等, 会导致错误
    	//  const Mock = require('mockjs');  // require is not defined
      	// import Mock from 'mockjs';  // Cannot use import statement outside a module
      	const star = Mock.mock({  // 报错: Mock未定义
          "string|1-10": "★"
        })
        console.log(star);
    </script>
  </body>
</html>

import Mock from 'mockjs' 在webpack中可以工作是因为经过webpack编译了

在jsDelivr中搜索mockjs，在这里找到其CDN地址，在文件中导入

或者在cdnjs中搜索mockjs, 在这里找到CDN地址, 复制到文件中引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/mockjs/dist/mock-min.min.js"></script>
  </head>
  <body>
    <script>
      	const star = Mock.mock({
          "string|1-10": "★"
        })
        console.log(star);  //it's Ok
    </script>
  </body>
</html>

require与import#

  • require与import都可以用于模块(module)的导入，require是Node.js中用于导入模块的函数，而import是ES6中的新关键字

  • 通常情况下推荐使用关键字import，官方标准

相关链接#