Bootstrapの開発環境 : CSS

今後、Bootstrapを使ったコーディングが増えそうなので、とりあえず開発環境を整えようと思った。

後々のカスタマイズを考えた場合、ソース(sass)をインストールしておくと便利なのでnpmでBootstrap4をインストールした。

またBootstrapをフルに利用する場合は、jQuery, popper.jsを使用する。
それらもnpmでインストールした。JSファイルをまとめるために、webpackを使用することにした。

またJavaScriptはES2015〜を使用したいので、トランスパイラであるBabelもnpmでインストールした。

構築作業

CSS

  • npmでnode-sassをインストール:$ npm install -D node-sass
  • npmでbootstrapをインストール:$ npm install -S bootstrap
  • scssファイルでbootstrapをimport:@import "./node_modules/bootstrap/scss/bootstrap.scss";
  • npm scriptsでコンパイル:"build:sass": "node-sass src/sass/style.scss -o ./css/ --output-style expanded"

JavaScript

BootstrapはjQueryとpopper.jsを使用。
Webpackを使って1ファイルにまとめる。

  • npmでjQueryをインストール: $ npm install -S jquery
  • npmでpopper.jsをインストール: $ npm install -S popper.js
  • npmでwebpack/webpack-cliをインストール
  • webpack.config.jsでビルド設定
  • エントリポイントのJSでjQueryをインポート:var $ = require("jquery");
  • npm scriptでビルド:"build:js": "webpack"

ES6(ES2015〜ES2020)をBabelでトランスパイル

$ npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env

webpack.config.js

module.exports = {
    mode: "development", // or production
    entry: "./src/js/index.js",
    output: {
        filename: 'main.js',
        path: __dirname + '/js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                            ]
                        }
                    }
                ]
            }
        ]
    }
};

会社員になって、ほぼ使用しなかったが、フリーランス時代から、Adobe Creative Cloudに毎月6,000円弱払い続けた。

最近解約したが、もしかしたら利用する機会が増えるかもしれない。難しい。

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。