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

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

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

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

Q&A

解決済

2回答

437閲覧

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

hamalt

総合スコア23

JavaScript

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

0グッド

0クリップ

投稿2022/07/13 08:56

編集2022/07/14 13:32

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

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

解決したいこと

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

html

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

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

html

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

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

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

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

JavaScriptコード

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

JavaScript

1import Sample from './ample.js'; 2 3export { 4 Sample 5}

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

JavaScript

1export default class Sample { 2 test() { 3 console.log("Is sample."); 4 } 5}

Package.jsonの内容

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

JavaScript

1{ 2 "name": "sample", 3 "scripts": { 4 "build": "rollup -c", 5 } 6}

Rollup.jsの設定ファイル

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

JavaScript

1import { terser as pluginTerser } from 'rollup-plugin-terser' 2import pluginCommonjs from '@rollup/plugin-commonjs'; 3import pluginNodeResolve from '@rollup/plugin-node-resolve'; 4import { babel as pluginBabel } from '@rollup/plugin-babel'; 5import * as path from 'path'; 6import pkg from './package.json'; 7 8const moduleName = pkg.name.replace(/^@.*\//, ''); 9const inputFileName = 'src/index.js'; 10 11const banner = ` 12 /** 13 * @license 14 * ${moduleName}.js v${pkg.version} 15 * Released under the ${pkg.license} License. 16 */ 17`; 18 19export default [ 20 // ブラウザ用の設定 21 { 22 input: inputFileName, 23 output: [ 24 // 非圧縮 25 { 26 name: moduleName, 27 file: pkg.browser, 28 format: 'iife', 29 sourcemap: 'inline', 30 banner 31 }, 32 // 圧縮 33 { 34 name: moduleName, 35 file: pkg.browser.replace('.js', '.min.js'), 36 format: 'iife', 37 sourcemap: 'inline', 38 banner, 39 plugins: [ 40 pluginTerser(), 41 ], 42 } 43 ], 44 plugins: [ 45 pluginCommonjs({ 46 extensions: ['.js', '.ts'], 47 }), 48 pluginBabel({ 49 babelHelpers: 'bundled', 50 configFile: path.resolve(__dirname, '.babelrc.js'), 51 }), 52 pluginNodeResolve({ 53 browser: true, 54 }), 55 ], 56 }, 57];

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

exportだと複数クラス返せるのでそうなります
default exportで返せば直接参照になります

javascript

1import Sample from './sample.js'; 2 3export default Sample

とか

javascript

1export {default} from './sample.js';

それとrollup.config.jsのoutput.nameが名称になるのでnew Sample()とアクセスしたければ”Sample”にする必要があります

投稿2022/07/13 13:05

編集2022/07/13 13:14
fijino

総合スコア136

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hamalt

2022/07/14 04:32

前者だとクラス形式の場合動作しなかったのですが、 `export {default} from './sample.js';` という形だと目標とする動作を実現できました! また、rollup.config.jsの設定ファイルでもnameの頭を大文字にすることで対応できました。 この機会にexport defaultに関してもう少し勉強することにします。 ありがとうございました!
guest

0

ビルドするファイルの内部で、window.Sample = Sampleと書いてしまってはどうでしょうか。

投稿2022/07/13 09:06

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hamalt

2022/07/14 04:30

なるほど、グローバルに予め入れてしまうという方法ですね。 こちらも今後の選択肢として考慮してみます。 ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問