1. 首页
  2. IT资讯

【前端】 在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

运行命令 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目录下的文件即可。

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/200260.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code