Question

我有下一个情况。网站分为管理员和前端。

管理员完全使用Angular 4开发，我对它非常满意。 Angular-cli等。一个入口点的SPA非常好的东西。

但与前端相混淆。它与Laravel一起编写并将通过它呈现。无法获得如何在那里使用Angular 4，如何设置工作流程。

我应该在前面解决的问题 - 小的，单独的，但是动态的块，如货币列表或建议表。

需要一些简单的渲染框架/库，没有太多的依赖关系和简单的工作流程。

Checked React - 但对我来说似乎太复杂了。

UPD：目前正在考虑Vue.js.它不需要预编译，可以应用于DOM元素，它的组件可以在系统中移动。

Answer 1

公共部分可以用React或Vue完成 - 直到它们都是模块化的并且没有太多样板。我选择了React。

我的系统配置包括带有Typescript的React和Webpack

module.exports = {
    entry: {
        map: "./src/components/map/app.tsx",
        common: "./src/common.apps.tsx",
        share: "./src/components/objectshare.tsx",
        object: "./src/components/object/index.tsx",
        vendor: ['react', 'react-dom', 'socket.io-client', 'whatwg-fetch', 'mobx']
    },
    output: {
        filename: "[name].js",
        path: __dirname + "./../../html/js/public"
    },

    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", ".css"]
    },

    module: {
        rules: [
             { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
             { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
};

所有魔术都是使用entry Webpack选项完成的。 entry中的每个条目都会在公共js位置创建正确的文件。库捆绑到供应商并插入每个页面。

Src文件夹包含用于具体页面（地图，对象等）的不同文件夹和用于诸如utils之类的模块的common文件夹。

在后端，我正在基本上使用页面模板中的script标记插入所需的脚本。

将编译的文件直接发布到名为html的生产文件夹。

如何使用Angular 4（或其他fm）组织网站的公共部分？

1 个答案: