web-dev-qa-db-ja.com

webpackを使用して複数のES6クラスを1つのファイルにバンドルし、スクリプトタグでインポートする

簡単なタスクを実行するためにwebpackを理解しようとしています（もちろん、3日間で手動で行うこともできました）が、webpackを学び、スケールアップできるようにするために、3日が経過しました。 ..

私はあなたと一緒に必死の質問をします、それはおそらくこの人が達成しようとしていたことに関連しています webpackを使用してファイルを連結および縮小する方法 ですが、彼の解決策は私にとってうまくいきませんでした。

問題は非常に簡単です。3つのクラスがあります。

./ src/class1.js

export default class One {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

./ src/class2.js

class Two {
  iMSoFat() {
    this.fatness = 88
    return (this.fatness)
  }
}

export { Two }

./ src/class3.js

class Three {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

export { Three }

私がしたいのはindex.htmlページです：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test ton cul</title>
    <script src="./lib/ebjs.js" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript">
      console.log(One, Two, Three);
    </script>
  </body>
</html>

私も満足しています

new window.One() 
//.. or EVEN 
new window.ebjs.One()

だから私はいくつかの設定を試してみました、私が経験した過激な詳細と欲求不満をあなたに惜しみません...睡眠と食事の欠如。

長い間、配列のエントリポイントを機能させるために試みましたが、ドキュメントのどこかで「配列を渡すと、起動時にすべてのモジュールがロードされます。最後のモジュールがエクスポートされます。」と読みました。そして、それは多くのことを説明しました...私はいつも何らかの方法でクラスの1つだけを得ました....それが何を意味するのか...なぜそのように振る舞うのでしょうか？それは私にはまったく意味がありません...とにかく...しかし、それでも、私が取得したクラスは、library.class（）、window.class（）、またはclass（）の形式ではありませんでした。

しばらくしてから、index.jsにすべてをロードしてエクスポートしましょう。

最初に、スタイルにES6インポートを試しました。だが import {One} from './src/class1'はどういうわけか機能せず、未定義のエクスポートで束を生成するだけです。window.library.One = undefinedのように。

したがって、私はこのindex.jsに落ち着く前にもう一度しばらくいじっていました：

index.js

const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')


export { class1, class2, class3 }

私のwebpack設定はかなり変更されましたが、これは私が現在使用しているものです：

webpackrc.config.babel.js

const libraryName = 'ebjs'
const outputFile = `${libraryName}.js` 

export default {
  entry: './index.js',
  target: 'web',
  // entry: './index.js',
  devtool: 'source-map',
  output: {
    path: `${__dirname}/lib`,
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
      },
    ],
  },
}

多くの詳細と試行錯誤が苦労して行われました。そして、私は自分の実験のログを書きました。多分、数時間でトリガーを引く前にそれを世界と共有するでしょう。

とにかく、それは一種の動作しますが、期待どおりではなく、確かに生産品質ではありません。クラスにアクセスするには、「new libraryName.One.One（）」を使用する必要があります。これをnpmにバンドルしたい場合、これはユーザーには意味がありません。それでも期待どおりに動作しません。

これはページ上のオブジェクトのスクリーンショットです： First world problems

誰かが私の助けに来てくれることを願っています。私の人生は本当にそれに依存するかもしれません:)

よろしくお願いします！

編集して終了

したがって、cbllの回答でうまくいきました... es6のimportステートメントを使用でき、クラスはバンドルに正しくエクスポートされました。私が使用できるhtmlで

libraryName.class()

誰かが私と同じ苦境にある場合、私は小さなレポを作成しました：

https://github.com/albertbuchard/example-webpack-es6-class-bundle

ありがとうcbllとMichael Jungo！

javascriptnode.jsnpmwebpackwebpack-2
13
Albert James Teddy

各classN.jsで、各クラスをexport default Oneで、ファイルの最後または最初のいずれかにエクスポートします（「1つの」の例で行うように、他の例では行いません）。 index.jsに、次のようにそれぞれをインポートします：import One from './classN.js'、もちろん同じフォルダーにあると想定します（そうでない場合は、適切なパスを追加します）。その後、メインのindex.jsに含まれ、Webpackにバンドルされます。

あなたの場合、これはあなたのindex.jsが次のようなものから始まることを意味します：

import One from ('./src/class1.js')
import Two from ('./src/class2.js')
import Three from ('./src/class3.js')

これは、例のOneのようなすべてのクラスをエクスポートすることを想定しているため、次のようになります。

export default class One { // code goes here

export default class Two { // code goes here

export default class Three { // code goes here

8
cbll

あなたはほとんどそこにいますが、import/export構文に少し混乱しているようです。

まず、クラスを異なる方法でエクスポートします。 ./src/class1.jsデフォルトのエクスポートを使用します：export default class One {ですが、他の2つでは名前付きエクスポートを使用しますexport { Two }。それらを正しくインポートするには、次のようにします。

import One from './src/class1'
import { Two } from './src/class2'
import { Three } from './src/class3'

requireはESモジュールとは異なる動作をするため、requireと同等のものは次のとおりです。

const One = require('./src/class1').default;
const Two = require('./src/class2').Two;
const Three = require('./src/class3').Three;

その後、次のようにして簡単にエクスポートできます。

export { One, Two, Three }

そしてあなたのindex.htmlライブラリプレフィックスを追加する必要があります：

<script type="text/javascript">
  console.log(ebjs.One, ebjs.Two, ebjs.Three);
</script>
3
Michael Jungo