Question

我有一些用PHP编写的项目，现在我想用webpack，npm等来管理前端资源。

到目前为止，我将JS / CSS文件的来源复制粘贴到公共目录中，只需在页面中包含这些内容即可。

我有文件，例如：client.js，其中包含：

$(function () {
    $(document).scroll(function () {
        if ($(window).scrollTop() > ($(window).height() / 3)) {
            $(".return-to-top").fadeIn(200);
        } else {
            $(".return-to-top").fadeOut(200);
        }
    });

    $('.return-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });

    $('pre code').each(function (i, block) {
        if (!$(block).attr("class")) {
            $(block).addClass('text');
        }
        hljs.highlightBlock(block);
    });
});

正如你所看到的，在这段代码中，我使用了jQuery，hljs插件（我有更多那种带有不同插件的文件）。

尝试配置npm package.json：

{
  "dependencies": {
    "highlight.js": "^9.12.0",
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11"
  },
  "scripts": {
    "build": "webpack"
  },
  "private": true
}

webpack.conf.js：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require("webpack");

module.exports = {
    entry: {
        app: './resources/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public/dist')
    },
    plugins: [
        new CleanWebpackPlugin(['public/dist']),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

./resources/app.js

import $ from "jquery";
import returnToTop from "./return-to-top";
import highlight from "./highlight";

window.jQuery = $;
window.$ = $;

$(function () {
    returnToTop($);
    highlight($);
});

在return-to-top.js和highlight.js个文件中，我有来自client.js的代码片段。

highlight.js：

import hljs from "highlight.js";

export default function highlight() {
    $('pre code').each(function (i, block) {
        if (!$(block).attr("class")) {
            $(block).addClass('text');
        }
        hljs.highlightBlock(block);
    });
};

return-to-top.js：

export default function returnToTop() {
    $(document).scroll(function () {
        if ($(window).scrollTop() > ($(window).height() / 3)) {
            $(".return-to-top").fadeIn(200);
        } else {
            $(".return-to-top").fadeOut(200);
        }
    });

    $('.return-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
};

有些问题：

这是一个好方法吗？
我可以做得更好吗？特别是点击/滚动等处理程序。
如何有效地包含CSS？
该镇的新人和＃34;

我想准备我的代码以使用Vuejs。

Answer 1

这是一个很好的方法吗？

这看起来是一个非常好的起点。我建议你试试吧：transile / bundle你的代码并运行它。如果您遇到错误，请从那里开始，一次一个错误。

我可以做得更好吗？特别是点击/滚动等处理程序。

可能。但是像点击/滚动处理程序这样的运行时事件与关于如何转换到ES模块的问题无关，这正是你实际所做的。

如何有效地包含CSS？

我认为这里没有太大的改变。除了您将使用webpack的css-loader将您的CSS转到所需的公共路径的可能性之外，最后您将得到一些通过<link>标记加载的CSS文件。< / p>

“镇上新人”的一些好习惯？

摇滚：）

根据评论进行修改

您能否提供更多详细信息：我建议您尝试一下：运行/捆绑您的代码并运行它？

这听起来比实际更难; transpiling / bundling是webpack负责的过程。

从终端运行webpack命令，使用您的webpack配置文件开始构建。
将生成的资源加载到页面中，看看它是否有效。

使用webpack

1 个答案: