web-dev-qa-db-ja.com

ブラウザでのモジュールの使用（WebPackなし）

私はES6をくぐり抜けていて、モジュールに出くわしました（Nice！）そして学習中に、ブラウザーでそれらを使用できるかどうかを確認しようとしていますwithout WebPack（まだ学習していません）。

  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. 今私はcanエディター内でメインファイル（js/lib/app.js）を実行できます（vscode/outputタブ）

    [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"
            ]
          }
        }
      ]
    ]
  }
}
javascriptwebpackecmascript-6babeljsecmascript-5
8
sleeper

それは苦痛です。

exportsとrequireはCommonJS仕様の一部です。私の記憶が正しければ、webpackはそれを内部的に実装します。 ES5の一部ではないため、同じ機能が必要です。

RequireJS 、またはモジュールのロードに似たものを試してください。

1
Nick

私はしばらくこれに固執していて、遊んだ後、私は解決策を見つけました。これを行うのにライブラリや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. Webサーバー（ローカルホスト）でindex.htmlを実行します
6
Rami Nour