フロントエンド開発環境構築 npm 関連のコマンド覚書

PhpStorm 利用前提でまとめていく。書きかけ。

npm init

全部リターンで package.json を生成

npm install パッケージ名

オプション

-g … グローバルインストール

–save or -S … package.jsonのdependenciesにバージョン付きで書き込む

–save-dev or -D … package.jsonのdevDependenciesにバージョン付きで書き込む（開発時のみ使用のものはこちら）

webpack

npm i -D webpack
npm i -D webpack-cli

⇒ npx webpack で webpack.config.js の内容に沿って処理。

npm i -D webpack-dev-server

⇒ npx webpack-dev-server –hot でホットリロードされる開発サーバが立ち上がる（はずだが、ホットリロードがされない…）

マニュアルでvueコンパイル

npm i -D vue-loader vue-template-compiler
npm i -D css-loader sass-loader vue-style-loader node-sass

npm i –save vue

JSとCSSをわける

npm i -D mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin

※vue-style-loader は使わなくなる？

PhpStorm で Run できるようにするには

npm bin -g でインストール先がわかるので、
Ctrl+Alt+sで設定画面＞Languages & Frameworks ＞ Node.js and NPM
Node interperter にインストール先フォルダ内にある node.ext を指定、
Package manager は、インストール先フォルダと同階層にある npm ディレクトリを指定。

npm run script名

package.json の scripts に script名をキーにしてコマンドをまとめておく。

その上で、 npm run script名とすることで処理が走る

node-sass

  1. npm init （初回のみ）
  2. npm i node-sass –save–dev（初回のみ）
  3. package.json の script に以下追加
    “build”: “node-sass –include-path scss scss/style.scss css/style.css –output-style expanded”
    ＃TODO:後でいろんな書き方を確認する
  4. PhpStorm の package.json 画面で指定した script名の左に緑の三角アイコンクリックでRun。それ以降は、右上の緑の三角アイコンからも build で実行できるようになる

scss だけ css に変換して watch さえできればいい場合

npm init
npm i -D webpack webpack-cli
npm i -D css-loader sass-loader style-loader node-sass
npm i -D mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin

webpack.config.js を以下の内容で追加。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (env, argv) => ({
    watch: true,
    entry: './resource/js/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'public/js')
    },
    // 最適化オプションを上書き
    optimization: {
        minimizer: [
            new TerserPlugin({}),
            new OptimizeCssAssetsPlugin({})
        ]
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    argv.mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            url: false
                        }
                    },
                    'sass-loader'
                ],
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/style.css'
        }),
    ],
    resolve: {
        extensions: [".js"],
        alias: {
            "@": path.resolve('resource')
        }
    },
});

 

package.json に対して以下の修正

以下の1行を削除（webpack.config.js の方を参照するから不要）

"main": "index.js",

以下をscripts に追加

"build": "webpack --mode=production",
"build:dev": "webpack --mode=development"

エントリーポイントのjsファイル

webpackで処理してもらうために以下の内容を記載。
（mode=production の場合は、css は別ファイルで生成されるので、必要なjsのコードが1行もないのであれば、HTML側でこのJSファイルを読み込む必要がない）

import '@/scss/style.scss';

@ は webpack.config.js で設定してあるが、resource ディレクトリエイリアス

ディレクトリ構成

public
├ css
└ js
resouce
├ js
│ └ index.js ※エントリーポイント
└ scss
└ style.scss ※エントリーポイントのjs から import される

public 下はコミット対象外にする

public/css と public/js 下に .gitkeep  （空ファイル）を設置

ルートに以下の内容の .gitignore を設置

public/*
!.gitkeep