Tweet

Pocket

今後、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円弱払い続けた。

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