質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

Rollup.jsでビルド後、クラスをそのまま使いたい

hamalt
hartan

総合スコア21

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0リアクション

0クリップ

176閲覧

投稿2022/07/13 08:56

編集2022/07/13 09:00

JavaScriptライブラリの作り方について勉強中です。

以下記事を参考にJavaScriptライブラリを作成してみているのですが、Rollup.jsによるビルド後、クラス名を直接参照することができません。
https://zenn.dev/manycicadas/books/b6f2d99b5208e9/viewer/cd4896

解決したいこと

yarn buildでビルド後、以下のようにライブラリを使いたいです。

html

<script src="dist/sample.min.js"></script> <script> var sam = new Sample(); sam.test(); </script>

しかし、実際には以下のようにしなければいけません。

html

<script src="dist/sample.min.js"></script> <script> var sam = new sample.Sample(); sam.test(); </script>

変数の中にクラスが入ってしまい、
new Sample();ではなくnew sample.Sample();としなければいけなくなりました。
どなたかご教授いただけますと幸いです。

実際のコードと設定は以下に記載します。

コードとRollup.jsの設定ファイル、package.jsonの内容

JavaScriptコード

エントリーファイル:src/index.js

JavaScript

import Sample from './ample.js'; export { Sample }

ロジック部分:src/sample.js

JavaScript

export default class Sample { test() { console.log("Is sample."); } }

Package.jsonの内容

package.json(必要部分のみ記載しています)

JavaScript

{ "name": "sample", "scripts": { "build": "rollup -c", } }

Rollup.jsの設定ファイル

rollup.config.js(記事を参考にしています)

JavaScript

import { terser as pluginTerser } from 'rollup-plugin-terser' import pluginCommonjs from '@rollup/plugin-commonjs'; import pluginNodeResolve from '@rollup/plugin-node-resolve'; import { babel as pluginBabel } from '@rollup/plugin-babel'; import * as path from 'path'; import pkg from './package.json'; const moduleName = pkg.name.replace(/^@.*\//, ''); const inputFileName = 'src/index.js'; const banner = ` /** * @license * ${moduleName}.js v${pkg.version} * Released under the ${pkg.license} License. */ `; export default [ // ブラウザ用の設定 { input: inputFileName, output: [ // 非圧縮 { name: moduleName, file: pkg.browser, format: 'iife', sourcemap: 'inline', banner }, // 圧縮 { name: moduleName, file: pkg.browser.replace('.js', '.min.js'), format: 'iife', sourcemap: 'inline', banner, plugins: [ pluginTerser(), ], } ], plugins: [ pluginCommonjs({ extensions: ['.js', '.ts'], }), pluginBabel({ babelHelpers: 'bundled', configFile: path.resolve(__dirname, '.babelrc.js'), }), pluginNodeResolve({ browser: true, }), ], }, ];

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。