如何在 Symfony 中使用随 npm 一起安装的 JavaScript 库

Question

我已经用npm安装了多个JS库，我试图在Symfony视图中使用它们。

<script src="{{ asset('path/to/js.js') }}"></script>

我必须在 web 目录中安装节点模块吗？这是一个好的做法吗？

实现这一目标的最佳方法是什么？

Answer 1

我建议使用 Gulp 将你的资产编译成缩小的 JS/CSS 文件。它可以通过 npm 安装，从命令行运行，并且存在良好的文档，特别是如何吞噬 npm 安装的文件。

这是我的 Gulpfile 示例，因此您可以了解如何吞噬 npm 文件：

var paths = {
    admin: {
        js: [
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/semantic-ui-css/semantic.min.js',
            'vendor/sylius/sylius/src/Sylius/Bundle/AdminBundle/Resources/private/js/**',
            'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/js/**',
            'vendor/sylius/sylius/src/Sylius/Bundle/ShippingBundle/Resources/public/js/**',
            'vendor/sylius/sylius/src/Sylius/Bundle/PromotionBundle/Resources/public/js/sylius-promotion.js',
            'vendor/sylius/sylius/src/Sylius/Bundle/UserBundle/Resources/public/js/sylius-user.js'
        ],
        sass: [
            'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/sass/**',
        ],
        css: [
            'node_modules/semantic-ui-css/semantic.min.css'
        ],
        img: [
            'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/img/**',
        ]
    },
    shop: {
        js: [
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/semantic-ui-css/semantic.min.js',
            'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/js/**',
            'vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/private/js/**'
        ],
        sass: [
            'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/sass/**',
            'vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/private/scss/**',
        ],
        css: [
            'node_modules/semantic-ui-css/semantic.min.css',
            'vendor/fortawesome/font-awesome/css/font-awesome.css'
        ],
        fonts: [
            'vendor/fortawesome/font-awesome/fonts/**.*'
        ],
        img: [
            'vendor/sylius/sylius/src/Sylius/Bundle/UiBundle/Resources/private/img/**',
        ],
        app: [
            'src/AppBundle/Resources/private/scss/**',
        ],
        appJs: [
            'src/AppBundle/Resources/private/js/**',
        ],
    }
};
gulp.task('admin-js', function () {
    return gulp.src(paths.admin.js)
        .pipe(concat('app.js'))
        .pipe(gulpif(env === 'prod', uglify))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(adminRootPath + 'js/'))
    ;
});