Установка Bootstrap с помощью NPM

Question

Я знаю, как использовать npm для установки и поддержки инструментов сборки, но я понимаю, что не уверен, как использовать его для установки фреймворков (css или js, я обычно просто шлепаю ссылки script / css в моем индексе. HTML).

Но, скажем, я хочу использовать npm. Я бы запустил npm install bootstrap и npm install jquery, но тогда я не уверен, каким будет следующий шаг.

Тогда я мог бы просто сказать <link rel="stylesheet" type="text/css" href="nodemodules/boostrap/dist/css/bootstrap.css">, но это кажется неуклюжим и глупым.

Я вижу, что многие люди импортируют такие вещи с помощью require('bootstrap');, но, честно говоря, я даже не уверен, куда это поместить.

Может ли кто-нибудь помочь мне заполнить эти пробелы?

Answer 1

Распространенный способ справиться с этим - через задачи grunt, которые копируют соответствующие файлы из node_modules в более подходящую папку.

Это отрывок из задачи копирования, который я использовал для недавнего проекта ...

    copy: {
        types: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/@types',
                    src: ['**/*.ts'],
                    dest: 'scripts/typings'
                }
            ]
        },
        jquery: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/jquery/dist',
                    src: ['*.js'],
                    dest: 'Content/libraries/jquery'
                }
            ]
        },
        handlebars: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/handlebars/dist',
                    src: ['*.js'],
                    dest: 'Content/libraries/handlebars'
                }
            ]
        },
        bootstrap: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/bootstrap',
                    src: ['dist/js/*.js', 'dist/fonts/*.*', 'dist/css/*.css'],
                    dest: 'Content/libraries/bootstrap'
                }
            ]
        }
    }

Возможно, есть более краткие способы написать это, но это работает для меня.

Это позволяет мне обновить пакеты моего сайта, выполнив следующие действия ...

$ npm install
$ grunt copy

Папки / Content / библиотеки и / scripts / typings переданы в мое приложение git repo, а node_modules - нет. Это помогает предотвратить проблемы, если модуль станет недоступным на каком-то этапе в будущем. Мой репозиторий Git содержит все необходимое для работы сайта.

Если по какой-либо причине один из этих модулей был удален из npm, это будет означать, что я не смогу выполнить обновления, но мой сайт будет по-прежнему работать с файлами, включенными в мое git-репо.

В моем случае мне вообще не нужны node_modules в моей среде выполнения, так как я не использую nodejs. Я просто использую npm для управления зависимостями клиентского модуля моего приложения.