【前端】 在html中使用 require/exports 或 import/export

本文又名 :

  • 解析 require/exports 或 import/export 为 html 可识别的代码

  • Uncaught ReferenceError: require is not defined

  • 我一点也不想部署 webpack/gulp，仅仅只想在单个html中使用 require/exports 或 import/export 写一点demo

# 正文前的简略科普

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

image.png

# 答案

  • 在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

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

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

Q：哪里下载module呢

# 参考资料

  • Babel官网 —— 使用 Babel

  • Babel官网 —— 配置文件

  • Babel 入门教程 —— 阮一峰

  • require，import的区别 —— 知乎问答

以上是 【前端】 在html中使用 require/exports 或 import/export 的全部内容， 来源链接： utcz.com/a/38706.html

回到顶部