html5 使用 export,【前端】 在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文件，然后编辑代码：

import useBattery from 'vue-use-web'

console.dir(useBattery);

当然，这是不可能成功的。如果你直接打开这个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 需要如下类似的写法：

// 必须使用相对路径

import useBattery from './node_modules/vue-use-web/dist/index.js'

console.dir(useBattery);

或者将相关代码在一个js文件中编辑(例如test.js)，然后将不可被浏览器识别的代码转为可被识别的代码最后通过 引用：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的区别 —— 知乎问答

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[【前端】 在html中使用 require/exports 或 import/export]http://www.zyiz.net/tech/detail-145950.html