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];
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/14 04:32