如何在 Symfony 中使用通过 npm 安装的 JavaScript 库

Question

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

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

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

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

Answer 1

我建议使用 Gulp 将您的资产编译成缩小的 JS/CSS 文件。它可以通过 npm 安装，运行从命令行和良好的文档存在，包括具体如何 gulp npm 安装文件。

这是我的 Gulpfile 示例，因此您可以了解如何 gulp 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/'))
    ;
});

如何在 Symfony 中使用通过 npm 安装的 JavaScript 库

How to use JavaScript library installed with npm in Symfony

symfony

npm

assetic

node-modules