在浏览器中使用模块(不带WebPack) [英] Using Modules in the Browser (without WebPack)

问题描述

我在遍历ES6时迷路了，遇到了模块(不错！)，在学习中，我试图查看是否可以在浏览器 中使用它们 WebPack(我还没有学过).

I'm grokking my way through ES6 and I ran into Modules (nice!) and in learning, I am trying to see if I can use them in the browser without WebPack (which I haven't learned yet).

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)

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

export const topTime = 1.5;

export const subTime = 0.75;

哪个是通过js/src/app.js导入的...

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

console.log(topTime);

console.log(subTime);

然后我将所有es6文件编译为es5(将文件放置在lib目录中.)

npm run babel

现在，我可以在我的编辑器("vscode/输出"选项卡)中运行主文件(js/lib/app.js)

Now I can run the main file (js/lib/app.js) inside my editor (vscode/output tab)

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

1.5

0.75

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

...but I think that is only because it's running in node.

1. 当我收到以下错误时，当我在浏览器(FF)中调用index.html文件(使用js/lib/app.js)时，它会中断...

ReferenceError: require is not defined

所以我看到babel对此进行了编译...

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

进入此...

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

...但是我认为这是有效的es5吗? ...不?那么，这是如何在webpack之前完成的呢?请告知.

这是我的package.json(如果有帮助的话)...

Here is my package.json (in case it helps)...

{
  "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"
            ]
          }
        }
      ]
    ]
  }
}

推荐答案

这很痛苦.

exports和require是CommonJS规范的一部分.如果我没记错的话，webpack会在内部实现它.您需要相同的功能，因为它不属于ES5.

exports and require are part of the CommonJS spec. If I remember correctly, webpack implements it internally. You need the same functionality, because it's not part of ES5.

尝试 RequireJS ，或类似的方法来加载模块.

Try RequireJS, or something similar to load your modules.

这篇关于在浏览器中使用模块(不带WebPack)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！