瞎折腾：在html中使用 require/exports 或 import/export

本文又名 :

• 解析 require/exports 或 import/export 为 html 可识别的代码
• Uncaught ReferenceError: require is not defined
• 我一点也不想部署 webpack/gulp，仅仅只想在单个html中使用 require/exports 或 import/export

# 正文前的简略科普

require/exports 一般使用在 node 环境中，写法只有以下三种简单的写法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

import/export 一般使用在 es6 环境中，写法就多种多样：

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

# 背景

在日常的开发生活中，我常常需要写点demo来验证modlue是否是我所需要的。而这些demo并不需要 webpack init 或者 glup init（我一点也不想这样做，实在是太麻烦了）。

例如只需要新建一个html文件，然后编辑代码：

<script>
  import useBattery from 'vue-use-web'
  console.dir(useBattery);
</script>

当然，这是不可能成功的。如果你直接打开这个html，浏览器将会提示：

Uncaught SyntaxError: Cannot use import statement outside a module

# 答案

• 在html中无法使用 require/exports，必须通过browserify之类的工具将代码转为浏览器可识别的代码：

  npx browserify test.js
  # or
  npx browserify test.js -o vue-use-web.js

• 在html中使用 import/export 需要如下类似的写法：

  <!-- 必须有 type="module" -->
  <script type="module">
    // 必须使用相对路径
    import useBattery from './node_modules/vue-use-web/dist/index.js'
    console.dir(useBattery);
  </script>

  或者将相关代码在一个js文件中编辑（例如test.js），然后将不可被浏览器识别的代码转为可被识别的代码最后通过 <script src='' /> 引用：

  npx babel test.js
  # or
  npx babel test.js -o vue-use-web.js

# 遇到的一些问题

Q： Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core

运行命令 npm i -D @babel/cli @babel/core @babel/preset-env 后再利用package.json执行相关命令即可。

Q：@babel/cli 和 babel/cli 区别

这是2个npm包，作者是同一个团队，都是babel提供的内建的命令行工具，只不过 babel/cli 仅支持版本7以下，@babel/cli支持版本7及以上。

Q：Uncaught SyntaxError: The requested module '' does not provide an export named 'default'

很明显，这个module不能通过import/export的方法进行引用，或许你可以看看它的源码；不出意外的话它是通过exports的方式进行导出的（需要使用require的方法呢）。

Q：哪里下载module呢

亲爱的，npm i [module_name] 都忘记了嘛？通过npm或者yarn等包管理器下载相关的module后再通过相对路径引用包中dist目录下的文件即可。

# 参考资料

• Babel官网 —— 使用 Babel
• Babel官网 —— 配置文件
• Babel 入门教程 —— 阮一峰
• require，import的区别 —— 知乎问答