使用 NPM 安装 Bootstrap

Question

我知道如何使用 npm 来安装和维护构建工具，但我意识到我不确定如何利用它来安装框架（css 或 js，我通常只是在我的 index.html 中添加脚本/css 链接）。

但是，假设我想使用 npm。我会运行npm install bootstrapand 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/libraries 和 /scripts/typings 已提交给我的应用程序 git repo，而 node_modules 则不是。如果模块在未来某个阶段不可用，这有助于防止出现问题。我的 git 存储库包含网站运行所需的所有内容。

如果由于某种原因从 npm 中删除了这些模块之一，则意味着我无法进行升级，但我的网站仍将使用我的 git 存储库包含的文件。

就我而言，我的运行时环境中实际上根本不需要node_modules，因为我没有使用nodejs。我只是使用 npm 来管理应用程序的客户端模块依赖项。