程序员经验分享-hwhale

在浏览器中使用模块（没有 WebPack）

2024-02-17

我正在摸索 ES6 的过程，遇到了模块（很好！），在学习过程中，我试图看看是否可以在浏览器中使用它们withoutWebPack（我还没学过）。

  1. 所以，我的 JS 目录中有以下文件/文件夹结构

    js

 - lib (for complied es6 via Babel)
   - mods (compiled modules)
     - module.js (compiled via Babel)
   - app.js (imports modules, attached to index.html)

 - src (for "raw" es6)
   - mods (es6 modules)
     - module.js (es6 module)
   - app.js (imports modules)

  2. 在 js/src/mods/module.js 中，我有以下代码......

    export const topTime = 1.5;

export const subTime = 0.75;

  3. 由 js/src/app.js 导入...

    import { topTime, subTime } from './mods/modules';

console.log(topTime);

console.log(subTime);

  4. 然后我将所有 es6 文件编译为 es5（将文件放置在 lib 目录中）。

    npm run babel

  5. Now I can在我的编辑器（vscode/output 选项卡）中运行主文件（js/lib/app.js）

    [Running] node "/home/me/www/es6.local/js/lib/app.js"

1.5

0.75

...但我认为这只是因为它在节点中运行。

  1. 当我在浏览器（FF）中调用我的index.html文件（带有js/lib/app.js）时，它会中断，因为我收到以下错误...

    ReferenceError: require is not defined

  2. 所以我看到 babel 编译了这个......

    import { topTime, subTime } from './mods/modules';

    进入这个...

    var _modules = require('./mods/modules');

...但我认为这是有效的 es5？ ...不？那么在 webpack 之前这是如何完成的呢？请指教。

这是我的package.json（如果有帮助的话）...

{
  "name": "es6.local",
  "version": "0.0.1",
  "description": "JavaScript ES6 Testing Sandbox",
  "main": "index.html",
  "scripts": {
    "babel": "babel js/src --out-dir js/lib --source-maps"
  },
  "author": "Student",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^4.16.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.0",
    "eslint-config-airbnb": "^16.1.0",
    "babel-cli": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  },
  "babel": {
    "presets": [
      [
        "env",
        {
          "targets": {
            "browsers": [
              "last 2 versions",
              "safari >= 7"
            ]
          }
        }
      ]
    ]
  }
}

我已经被这个问题困扰了一段时间，经过一番尝试后我找到了解决方案。 您不需要任何库或 webpack 来执行此操作，并且我不确定这是否可以在 chrome 之外工作。

  1. 您需要在网络服务器上运行此代码，否则它将无法工作（换句话说，它必须位于本地主机上，而不是 file:// 上）
  2. 建立一个文件夹，名为jsmodule
  3. 创建一个名为index.html使用以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js module</title>
</head>
<body>
    <h1>JS module test</h1>
    <script type="module" src="script.js"></script>
</body>
</html>
  1. 在同一文件夹中创建一个名为script.js使用以下代码：
import Person from './Person.js';
import Book from './Book.js';


let person1 = new Person();
let someBook = new Book();
  1. 在同一文件夹中创建一个名为Person.js使用以下代码：
export default class Person{
    constructor(){
        alert("hallo from person");
    }
}
  1. 在同一文件夹中创建一个名为Book.js使用以下代码：
export default class Book{
    constructor(){
        alert("Hallo from book");
    }
}
  1. Run the index.html在您的网络服务器上（本地主机）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

WEBPACK

ECMAScript6

babeljs

ecmascript5

在浏览器中使用模块（没有 WebPack） 的相关文章

  • 将 Laravel 集合/数组转换为 Javascript 数组

    我想将 Laravel 中的数组分配给 JavaScript 数组 我已经从我的AppServiceProvider和 json decoded 它像 View composer function view users Users all

  • 如何在react-select v2中创建optgroup？

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com

  • 循环内的局部变量会被垃圾收集吗？

    我想知道将循环内引用的任何变量放在循环外是否更有效 或者它们可以像函数内的变量一样被垃圾收集吗 var obj key val for var i 0 i lt 10 i console log obj or for var i 0 i l

  • AWS Lambda 提前结束（没有任何显式返回或回调）

    我在放入 AWS Lambda 中的一些 Node js 代码时遇到了一些问题 我需要进行几个异步调用 虽然第一个调用的行为符合我的预期 但 lambda 函数在第二个调用完成之前终止 返回值为 null 这让我认为 lambda 正在执行

  • NodeJs读取JSON文件

    我正在使用 NodeJs 读取 json 文件 我的代码非常基本 var obj require sample json console log obj 0 Sample json 文件包含这样的字符串化 JSON sample good

  • Visual Studio IDE 中功能后的空间

    如何设置 Visual Studio 中的设计以在我的 javascript 函数后面放置一个空格 目前 当我按下返回键时 我得到了这个 var myfunc function 当我想要这个的时候 var myfunc function 知

  • 变量前面加双下划线

    我的节点代码中有以下代码片段 var fs require fs fs readdir dirname function err files console log files 为什么变量 dirname 有双下划线 我知道一个下划线是私有

  • Vue Draggable - 如何仅替换所选项目以防止移动网格上的所有其他项目？

    这是一个要测试的示例 https codesandbox io s j4vn761455 file src App vue 112 116 https codesandbox io s j4vn761455 file src App vue

  • 如何在 javascript 或 jquery 中按尺寸对图像进行排序

    如何在 JavaScript 或 jQuery 中按尺寸对图像进行排序 我的代码如下 var imgsrc if document images length lt 1 alert No images to open return for

  • FormData 中的 Blob 为 null

    我正在尝试通过远程 API 通过 ajax 在 android 中发送创建的照片 我在用着相机图片背景 https github com an rahulpandey cordova plugin camerapicturebackgrou

  • Famo.us 滚动视图高度

    我正在尝试使用著名的顺序布局在滚动视图下方添加图像 但滚动视图的高度有问题 这就是我创建滚动视图的方式 var scrollview new Scrollview direction Utility Direction X options

  • 很奇怪！调用 window.location 或 location.replace 会重定向到该页面，然后再次返回！

    我处于调试模式 因此我可以看到正在访问哪个页面 当我打电话时window location or window location replace 它会转到该页面 然后返回原始页面 怎么会这样 解决方案是添加 window location

  • 表单序列化javascript（无框架）

    想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We

  • 如何上传文件 - sails.js

    我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时 仅将其下载为 ZIP XML 文件 我可以做什么 我在用着 填写上传文件文档 https github com balderda

  • javascript/jquery 禁用点击提交按钮，防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这

  • 从未使用 mimeType 初始化的 MediaRecorder 获取 mimeType

    我正在使用 MediaRecorder API 在页面上录制一些媒体 在我的 MediaRecorder 初始化中 我没有指定内容类型 因为我不需要任何特别的内容 浏览器可以选择它想要的 var mediaRecorder new Medi

  • 无法从 JSON 请求获取数据，尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id

  • ES6 Reflect API 的好处

    我一直在努力升级一些代码以使用 ES6 语法 我有以下代码行 delete this foo 我的 linter 提出了使用建议 Reflect deleteProperty this foo 您可以找到该方法的文档here https d

  • 如何从react-bootstrap复选框获取值/属性？

    我正在尝试使用反应引导复选框 https react bootstrap github io components html forms controls https react bootstrap github io components

  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网

随机推荐

  • 操纵事件和平移模式

    我正在开发一个用于触摸设备的 WPF 我面临一个奇怪的问题 我的 XAML 结构是

  • 在 Winforms 中检测空闲用户

    如果用户有 5 分钟不活动 我想暂停我的程序 我所说的不活动是指在那段时间没有按下鼠标或键盘 包括在程序之外 有什么出发点吗 在计时器内你可以 p invokeGetLastInputInfo http www pinvoke net de

  • 一次性编写字典？

    我很想在 Python 中拥有一个一次性写入的字典对象 这样 my dict 1 foo my dict 2 bar my dict 1 baz Raises KeyError 我可以想象制作一个简单的食谱 但我想知道是否存在经过深思熟虑的

  • 如何在 win32 中创建具有默认行为的按钮

    我一直在尝试创建一个具有默认行为的按钮 即当用户按 ENTER 时 该按钮将被触发 我使用 WS TABSTOP 样式创建了按钮 并向其发送了带有 BS DEFPUSHBUTTON has WPARAM 参数的 BM SETSTYLE 消息

  • 如何访问具有数组类型值的 Solidity 映射？

    我定义了一个映射类型的状态变量 例如映射 uint256 gt uint256 我想将其公开 以便我可以从合同之外访问它 但是编译器报错TypeError Wrong argument count for function call 1 a

  • Android ListView 排序

    我只是从 Android 开发开始 虽然 Milestone 是一个不错的设备 但 Java 不是我的自然语言 而且我在 Android SDK Eclipse 和 Java 本身的 Google 文档上遇到了困难 反正 我正在为 Andr

  • Realm Swift 回调函数

    我使用 swift3 和 Realm 2 3 交易完成后我需要回调 例如 我有如下代码 如何在领域数据事务完成后获得回调 DispatchQueue main async try self realm write self realm ad

  • LINQ - (x, i) 做什么？

    我今天偶然发现了这段代码 并意识到我根本不理解它 someArray Select x i gt new XElement entry new XElement field new XAttribute name Option i 1 重点

  • 从 VS2015 发布后，DNX Web 命令抛出“无法解析项目”错误

    这是关于 net core 的过时预发布版本 我使用 Visual Studio 2015 的测试版 预览版在预发布的 ASP Net 5 后来更名为 asp net core 中创建了一个基本项目 我已将该项目发布到文件系统并尝试运行它从

  • iOS Swift 标签栏图标插入在运行时被删除

    我在标签栏控制器中有两个 ViewController 在界面生成器中 我已将图像插图 5 5 5 5 应用于选项卡栏图标 以获得我想要的尺寸 当我最初运行模拟器时 一切看起来都很棒 但是当我使用 Tab 键切换到第二个 ViewContr

  • Airconsole 和 Unity 集成问题

    首先 我是 Unity 和 Airconsole 这两个平台的新手 我只是在探索与空调集成的统一 但我在导入 空调插件插件 时遇到错误 从Asset Store 我正在使用最新版本的unity2018 3 0f2 Personal在 Win

  • MEAN JS - 主要 html 文件 (index.html) 位于哪里

    我刚刚开始学习 MEAN JS 我正在尝试查找主页的 html 文件 但是我只在视图文件夹中看到 home client view html 和 header clinet view html 据我所知 通常有一个主html 包含了主页的所

  • glGetString 和 glGetShaderInfoLog 等函数使用什么编码

    OpenGL有一些功能 例如glGetString and glGetShaderInfoLog返回字符串 这些使用什么形式的文本编码 我认为 鉴于它们作为GLchar 它是返回值中包含的 ASCII 编码文本 但这是否在任何地方指定 作为

  • Flutter守护进程启动失败

    我每次打开时都会收到此警告VS code 有什么办法可以解决这个问题吗 谢谢 我添加了这个警告的日志 我努力了扑干净 and 扑医生一切都很好 但是每次我打开 VS Code 时仍然出现此警告 我还遇到了一个问题 VS Code 显示没有设

  • 实体框架 Linq 等于值或为 null

    我正在尝试使用 linq 从视图中获取项目列表 其中字段 LocationId 为值或为 null LocationId 字段是 int 我正在尝试的代码是这样的 var items context Items Where d gt d L

  • 每个工人的最大日期

    考虑两个表 工作表有如下字段W ID W Name 课程表有如下字段C ID C Name C Date 一个工人可以选修多门课程 一门课程也可以由许多工人选修 因此 两个表之间存在多对多关系 打破多对多 并创建一个名为 Takes 的新表

  • 如何调整 IntelliJ 中行尾的位置

    在 IntelliJ 中 就像在 Eclipse 中一样 代码编辑器中有一条细灰色垂直线 我假设就像在 Eclipse 中一样 该行显示了 行尾 应该在的位置 2个问题 1 在IntelliJ中哪里可以调整一行的长度 2 如果不使用与 1

  • React-Router：使用 Navlink 将道具从一个组件传递到另一个组件

    我在用

  • 如何通过svelte访问本地json文件？

    现在我使用 onMount 异步函数来访问 const dataAPI jsfwperf json let data onMount async gt const res await fetch dataAPI then res gt re

  • 在浏览器中使用模块（没有 WebPack）

    我正在摸索 ES6 的过程 遇到了模块 很好 在学习过程中 我试图看看是否可以在浏览器中使用它们withoutWebPack 我还没学过 所以 我的 JS 目录中有以下文件 文件夹结构 js lib for complied es6 via

热门标签