本文又名 :

• 解析 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的區別 —— 知乎問答