JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。
bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。
先日仕事でnpmを使ったインストールをしたことで、一気にライブラリをインストールする方法があったのでメモを。
npmに関しては下記の説明が一番わかりやすいかも。
※Laravelでの使用を前提としています。
準備
- nodeのインストール
- npmのインストール
package.jsonというファイルに読み込むライブラリ群を記述します。
フレームワークなどだとすでにこのファイルがあることが多いですが、ない場合はnpm initで作成できます(質問にはすべてディフォルトでいいかと。)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "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" }, } |
その後、
|
1 |
npm install |
というコマンドでインストールを行います。package-lock.jsonに記述されます。
ちなみにあとから個別のライブラリを追加したい場合は
|
1 |
npm install ライブラリ名 |
と入力します。具体的なライブラリ名などはhttps://www.npmjs.com/で探しましょう。
実行後、package.jsonに記述されます。
ソース
ビルド元 ※Laravelだと下記のようになります。
resources/js/bootstrap.js(appのさらに元となるもの。Laravelにあるからそのままかきましたが、実際にはappだけでいいかもしれません。)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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。ここだけでもいいかも・・・)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** * 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)
|
1 2 3 4 5 6 7 8 |
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)
|
1 2 3 4 5 6 7 |
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 |
下記リンク参考
このあと、タスクランナーで下記のように記述します。
webpack.mix.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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') |
実際のビルドは
|
1 |
npm run dev |
で行います。コンパイルされたjs(今回の場合public/pc/js/original.js)を読み込めばライブラリが使えます。
jqueryをはじめとして、ライブラリを１つ１つ読み込まなくていいので楽です。
[…] JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 […]
[…] こちらのリンクでJSのnpmパッケージでのインストール＆ビルドをしたので、gulpでのビルドを。 […]