BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. その他全般

roolupを使ったライブラリの構築（ステップバイステップの実装）

2022-01-03 23:19:07

概要

Rollup および Webpack , Parcel はどちらもモジュールバンドルツールですが、焦点が異なるので、ここでは Rollup はLIBSのビルドに適しており、一方 Webpack , Precel は、アプリケーションの開発により適しています。この記事では、簡単な例を組み合わせて Rollup を使用して、独自のライブラリを構築することができます。

目標の達成

  1. ロールアップ用の完全なlibプロジェクトを作成する。
  2. 開発用と本番用の構成を区別し、開発テストを容易にする。
  3. サードパーティライブラリの導入（例． ol )、サードパーティライブラリのパッケージングを実装する。

実装手順

I ロールアップの基本

1. プロジェクトの初期化

cnpm init -y

2. 依存関係のインストール

cnpm install rollup --save-dev

3. 新しいテストコード 

src/main.js

const add = (a, b) => a + b;

const res = add(100 + 100)
console.log(res)

4. テストのコンパイル 

package.json
// Under the script node add
"dev": "rollup -i src/main.js -o dist/bundle.js -f es"

// Run the compile command
npm run dev


-i

このディレクティブでは

  • -i パッケージ化するファイルを指定すると --input は src/index.js の略称です。
  • -i は -o をパッケージエントリーファイルの引数で指定します。
  • --output.file という出力ファイルを指定する。 --file または dist/bundle.js このパラメータの省略形。(このパラメータが存在しない場合、出力はコンソールに向けられる) -o は -f の引数を出力ファイルに渡す。
  • -f パッケージファイルの形式を指定することで --format は es の略称です。
  • -f は amd, cjs, es\esm, iife, umd パラメータを使用して、パッケージ化されたファイルがES6モジュール仕様を使用していることを示します。

ロールアップのパッケージングファイルのサポート形式は以下の通りです。 config/rollup.dev.config.js . ここで、amdはAMD規格、cjsはCommonJS規格、esmesはESモジュール規格、iifeは即時呼び出し機能です。umdはamd、cjs、iifeの両方をサポートしています。

5. 設定ファイル

ルートディレクトリに config/rollup.prod.config.js export default { input: ". /src/index.js", output: [ { file: '. /dist/my-lib-umd.js', format: 'umd', name: 'myLib' //when the entry file has export, the 'umd' format must specify name //so that the contents of the export can be accessed by name when introduced via the <script> tag. }, { file: '. /dist/my-lib-es.js', format: 'es' }, { file: '. /dist/my-lib-cjs.js', format: 'cjs' } ] } と 

package.json
// Under the script node change
"dev": "rollup -c config/rollup.dev.config.js",
"prod": "rollup -c config/rollup.prod.config.js"
// Run the compile command
npm run dev
npm run prod


// 1. Install the dependencies
cnpm i rollup-plugin-babel @babel/core @babel/preset-env --D

// 2. Modify the file `config/rollup.prod.config.js`
import babel from 'rollup-plugin-babel'

plugins:[
  babel({
      exclude: 'node_modules/**'
  })
]

// 3. Create the file `.babelrc` in the root directory
{
  "presets": [
      [
        "@babel/preset-env"
      ]
    ]
}

// 4. Run the compile command
npm run prod

設定ファイルの修正 

// 1. Adding dependencies
cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs -D


// 2. Modify the file `config/rollup.prod.config.js`
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

plugins:[
  resolve(),
  commonjs(),
]

// 5. Run the compile command
npm run prod


// 1. Install the dependencies
cnpm i postcss rollup-plugin-postcss [email protected] postcss --D

// 2. Modify the file `config/rollup.config.prod.js`
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'

plugins:[
  postcss({
    // insert the css into the style
    // inject: true,
    // put css in the same directory as js
    extract: true,
    plugins: [
      autoprefixer()
    ]
  })
]

// 3. Create the test file `css/main.css`
html, body, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

// 4. Introduce the file `main.js`
import 'css/main.css'

II ロールアッププラグイン

1. rollup-plugin-babel 

// 1. Install the dependencies
cnpm install rollup-plugin-serve rollup-plugin-livereload -D

// 2. Modify the configuration file `config/rollup.config.prod.js`
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

serve({
  contentBase: '', // the folder where the server is started, the default is the root of the project, you need to create ind under this file
  port: 8800 // port number, default 10001
}),
livereload('dist') // watch dist directory, refresh the page when the files in the directory change

// 3. Modify the startup file `package.json`
"build:dev": "rollup -wc build/rollup.config.js --environment NODE_ENV:development"

// 4. Add the test file `index.html`
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="dist/easymap.min.css" rel="external nofollow" >
</head>
<body>
<div id="map"></div>
<script src="dist/easymap.min.js"></script>
<script>
  var map = new EasyMap()
  console.log(map)
</script>
</body>
</html>

// 5. Start
npm run dev

2. rollup-plugin-commonjs

rollupはデフォルトではCommonJSモジュールをサポートしていないので、自分で書く場合はCommonJSモジュールの構文を使わないようにすればよいのですが、外部ライブラリの中にはcjsやumd（webpackでパッケージ化されている）があるので、これらの外部ライブラリを使う場合はCommonJSモジュールに対応する必要があります。 

// 1. Install the dependencies
cnpm i eslint eslint-config-mourner rollup-plugin-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin- promise eslint-plugin-standard -D

// 2. Add the .eslintrc.js file to the root directory
module.exports = {
  extends: 'standard',
  // Added runtime environment settings, set browser to true
  env: {
    browser: true
  }
}

// 3. Modify the configuration file `config/rollup.config.prod.js`
import eslint from 'rollup-plugin-eslint';

eslint(),

// 4. Add the .eslintignore
dist
src/css

3. rollup-plugin-postcss 

// 1. Install the dependencies
cnpm i rollup-plugin-uglify -D

// 2. Modify the configuration
import { uglify } from 'rollup-plugin-uglify'

// The js compression plugin needs to be introduced at the end of the
uglify()

III 開発構成

1.ロールアップ・プラグイン・サーブ 

// 1. Install the dependencies
cnpm install rollup-plugin-serve rollup-plugin-livereload -D

// 2. Modify the configuration file `config/rollup.config.prod.js`
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

serve({
  contentBase: '', // the folder where the server is started, the default is the root of the project, you need to create ind under this file
  port: 8800 // port number, default 10001
}),
livereload('dist') // watch dist directory, refresh the page when the files in the directory change

// 3. Modify the startup file `package.json`
"build:dev": "rollup -wc build/rollup.config.js --environment NODE_ENV:development"

// 4. Add the test file `index.html`
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="dist/easymap.min.css" rel="external nofollow" >
</head>
<body>
<div id="map"></div>
<script src="dist/easymap.min.js"></script>
<script>
  var map = new EasyMap()
  console.log(map)
</script>
</body>
</html>

// 5. Start
npm run dev

2.エスリント 

// 1. Install the dependencies
cnpm i eslint eslint-config-mourner rollup-plugin-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin- promise eslint-plugin-standard -D

// 2. Add the .eslintrc.js file to the root directory
module.exports = {
  extends: 'standard',
  // Added runtime environment settings, set browser to true
  env: {
    browser: true
  }
}

// 3. Modify the configuration file `config/rollup.config.prod.js`
import eslint from 'rollup-plugin-eslint';

eslint(),

// 4. Add the .eslintignore
dist
src/css

4.ロールアップ・プラグイン・uglify 

// 1. Install the dependencies
cnpm i rollup-plugin-uglify -D

// 2. Modify the configuration
import { uglify } from 'rollup-plugin-uglify'

// The js compression plugin needs to be introduced at the end of the
uglify()

サンプルコード

roolupを使ったライブラリの構築についての記事は以上です。roolupを使ったlibの構築については、Script Houseの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します