npmでのJSライブラリインストール＆ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。

bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。

先日仕事でnpmを使ったインストールをしたことで、一気にライブラリをインストールする方法があったのでメモを。

npmに関しては下記の説明が一番わかりやすいかも。

いまさら聞けない！npmのこれだけは知っておきたい基礎知識

※Laravelでの使用を前提としています。

Contents

1 準備
2 ソース
3 参考リンク

準備

nodeのインストール
npmのインストール

package.jsonというファイルに読み込むライブラリ群を記述します。

フレームワークなどだとすでにこのファイルがあることが多いですが、ない場合はnpm initで作成できます(質問にはすべてディフォルトでいいかと。)

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
}

{

"private": true,

"scripts": {

"dev": "npm run development",

"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch-poll": "npm run watch -- --watch-poll",

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

"prod": "npm run production",

"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

"devDependencies": {

"axios": "^0.16.2",

"bootstrap-sass": "^3.3.7",

"cross-env": "^5.0.1",

"jquery": "^3.1.1",

"laravel-mix": "^1.0",

"less": "^2.7.3",

"less-loader": "^4.0.5",

"lodash": "^4.17.4",

"vue": "^2.1.10"

}

その後、

npm install

1	npm install

というコマンドでインストールを行います。package-lock.jsonに記述されます。

ちなみにあとから個別のライブラリを追加したい場合は

npm install ライブラリ名

1	npm install ライブラリ名

と入力します。具体的なライブラリ名などはhttps://www.npmjs.com/で探しましょう。

実行後、package.jsonに記述されます。

ソース

ビルド元　※Laravelだと下記のようになります。

resources/js/bootstrap.js(appのさらに元となるもの。Laravelにあるからそのままかきましたが、実際にはappだけでいいかもしれません。)

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

window._ = require('lodash');

/**

* We'll load jQuery and the Bootstrap jQuery plugin which provides support

* for JavaScript based Bootstrap features such as modals and tabs. This

* code may be modified to fit the specific needs of your application.

try {

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

} catch (e) {}

/**

* We'll load the axios HTTP library which allows us to easily issue requests

* to our Laravel back-end. This library automatically handles sending the

* CSRF token as a header based on the value of the "XSRF" token cookie.

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**

* Next we will register the CSRF Token as a common header with Axios so that

* all outgoing HTTP requests automatically have it attached. This is just

* a simple convenience so we don't have to attach every token manually.

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

} else {

console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');

}

resources/js/app.js(bootstrapを読み込み実際のコアとなるJS。ここだけでもいいかも・・・)

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

//ここで使いたいJSのライブラリをrequireで読み込みwindow空間に付与します。
window.Vue = require('vue');
window.$ = require('jquery');
window.Sugar = require('sugar');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

/**

* First we will load all of this project's JavaScript dependencies which

* includes Vue and other libraries. It is a great starting point when

* building robust, powerful web applications using Vue and Laravel.

require('./bootstrap');

//ここで使いたいJSのライブラリをrequireで読み込みwindow空間に付与します。

window.Vue = require('vue');

window.$ = require('jquery');

window.Sugar = require('sugar');

/**

* Next, we will create a fresh Vue application instance and attach it to

* the page. Then, you may begin adding components to this application

* or customize the JavaScript scaffolding to fit your unique needs.

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({

el: '#app'

});

resources/js/original.js(実際の処理の記述を書くJS)

var app = require('../js/app.js');
//例えばSugarというライブラリを使ったと仮定します。
var num_str = Sugar.Number.random(1,33);
console.log(num_str);//17

var hogehoge = '123-0077';
var aaaa = Sugar.String.remove(hogehoge,'-');
console.log(aaaa);//1230077

var app = require('../js/app.js');

//例えばSugarというライブラリを使ったと仮定します。

var num_str = Sugar.Number.random(1,33);

console.log(num_str);//17

var hogehoge = '123-0077';

var aaaa = Sugar.String.remove(hogehoge,'-');

console.log(aaaa);//1230077

上記がビルド元のファイルです。実際の処理はビルド後に書いてももちろんＯＫです。

*下記のように実際の処理をかくjsに書いてもOK。こちらの方が見やすいかも・・・・
resources/js/original.js(実際の処理の記述を書くJS)

window.Sugar = require('sugar');
var num_str = Sugar.Number.random(1,33);
console.log(num_str);//17

var hogehoge = '123-0077';
var aaaa = Sugar.String.remove(hogehoge,'-');
console.log(aaaa);//1230077

window.Sugar = require('sugar');

var num_str = Sugar.Number.random(1,33);

console.log(num_str);//17

var hogehoge = '123-0077';

var aaaa = Sugar.String.remove(hogehoge,'-');

console.log(aaaa);//1230077

下記リンク参考

npmでのjQueryライブラリの読み込み

このあと、タスクランナーで下記のように記述します。

webpack.mix.js

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
   .js('resources/assets/pc/js/app.js', 'public/pc/js')
   .js('resources/assets/pc/js/original.js', 'public/pc/js')

let mix = require('laravel-mix');

|--------------------------------------------------------------------------

| Mix Asset Management

|--------------------------------------------------------------------------

| Mix provides a clean, fluent API for defining some Webpack build steps

| for your Laravel application. By default, we are compiling the Sass

| file for the application as well as bundling up all the JS files.

mix

.js('resources/assets/pc/js/app.js', 'public/pc/js')

.js('resources/assets/pc/js/original.js', 'public/pc/js')

実際のビルドは

npm run dev

1	npm run dev

で行います。コンパイルされたjs(今回の場合public/pc/js/original.js)を読み込めばライブラリが使えます。

jqueryをはじめとして、ライブラリを１つ１つ読み込まなくていいので楽です。

参考リンク

npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう

もう、jQueryはnpmで管理しようぜ

3分でできるnpmモジュール

モジュール&npmのキホン〜 JSおくのほそ道 #003

npm と Node.js 上で require を使ったモジュール読み込みの仕組みについてメモ

cssフレームワークをnode_modulesから読み込む – skillup より:

2017年11月25日 10:18 PM

[…] JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 […]

返信
npmでのJSライブラリインストール＆ビルド(※gulp使用時) – skillup より:

2017年11月26日 10:33 PM

[…] こちらのリンクでJSのnpmパッケージでのインストール＆ビルドをしたので、gulpでのビルドを。 […]

返信

comment コメントをキャンセル