WEBAPP开发教程如何搭建web前端框架-职坐标

WEBAPP开发教程如何搭建web前端框架

凌雪 2018-11-08 来源：网络阅读 1330 评论 0

摘要：本文将带你了解WEBAPP开发教程如何搭建web前端框架，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发教程如何搭建web前端框架，希望本文对大家学WEBAPP有所帮助。

1、确定项目使用的技术
根据项目的需求等来选择使用的技术（这里以angular4 + typsescript + nodejs+mongodb举例）
2、新建一个项目的工作文件夹
使用npm init初始化项目，根据问题配置，一般是直接回车使用默认配置,生成package.json文件
{ "name": "test_keyboard", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start":"electron ./main.js",    "tsc":"tsc",    "tscw":"tsc -w" }, "author": "", "license": "ISC"}
什么是npm？
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从 npm 服务器下载别人编写的第三方包到本地使用。允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。
更多npm用法参见官网https://www.npmjs.com/

3、新建一个index.html页面
<!DOCTYPE html><html> <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>首页</title>    <script src="./node_modules/systemjs/dist/system.src.js"></script    <script src="system.config.js"></script>   </head> <body id="body"> </body></html> 代码中引用了system.src.js，system.js是什么呢?
systemjs是模块加载器，可以导入任何流行格式的模块（CommonJS、UMD、AMD、ES6）。它能够很好的处理和检测所使用的格式。 systemjs 也能使用插件转换es6（用 Babel ）或者转换TypeScript
代码。你只需要在导入你的模块之前使用 System.config({ ... }) 进行系统配置。
如何使用它?首先使用npm下载systemjs 命令：npm install systemjs
4、新建配置文件system.config.js

SystemJS.config({    typescriptOptions:{        path:"tsconfig.json",    },    packages:{        "webAppDist":{            "main":"app.module.js",            "defaultExtension": 'js'        }    }});System.import("webAppDist").catch(function(e){    console.log(e);});

packages:指定加载时使用的包 main:入口文件
webAppDist就是模块加载器要加载的所有文件，这个文件夹是由ts的配置来生成的
更多system.config.js的详细配置参见githup地址https://github.com/systemjs/systemjs
5、新建ts的配置文件tsconfig.json
npm install typescript

{    "compilerOptions": {        "outDir": "./webAppDist",        "sourceMap": true,        "module": "commonjs",        "moduleResolution": "node",        "target": "es5",        "experimentalDecorators":true,        "emitDecoratorMetadata": true,        "noImplicitAny": true,        "suppressImplicitAnyIndexErrors": true,        "lib": [            "es2015",            "dom"        ],        "typeRoots": [            "../node_modules/@types/"        ]    },    "include": [        "./webApp/**/*"    ]}outDir指定文件编译后的目录 include指定要编译的文件，编译ts文件成js文件,在package.json文件配置编译命令,参加package.json文件
运行npm run tsc 生成webAppDist文件夹
ts的配置https://www.tslang.cn/docs/handbook/tsconfig-json.html
6、新建webApp目录，这里面放的是所有html页面和js代码，首先得有个入口文件，与system.config.js配置文件中的入口文件名一样，app.module.ts，里面引入了所有js文件，不被引入的在加载时都不会被加载
7、打包(将代码压缩，使程序运行速度更快）
变量名替换，剔除空格，去除没有用到的代码npm install
webpack
新建webpack.config.js文件
"use strict";const path = require('path');const webpack = require('webpack');let UglifyJSPlugin = require('uglifyjs-webpack-plugin');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry:{        dist:'./webAppDist/app.module.ts',    },    output: {        filename: '[name].js',        path: path.resolve(__dirname, './')    },    module: {        rules: [            {                 test: /\.html$/,                 exclude: /node_modules/,                 use:[{                    loader: 'html-loader',                }],            }        ]    },    resolve: {        extensions: ['.ts', '.tsx', '.js'],        alias: {         }    },    plugins:[ new UglifyJSPlugin({ comments      : false, mangle : true,            sequences     : true, // join consecutive statemets with the “comma operator”            properties    : true, // optimize property access: a["foo"] → a.foo            dead_code     : true, // discard unreachable code            drop_debugger : true, // discard “debugger” statements            unsafe        : false, // some unsafe optimizations (see below)            conditionals : true, // optimize if-s and conditional expressions            comparisons   : true, // optimize comparisons            evaluate      : true, // evaluate constant expressions            booleans      : true, // optimize boolean expressions            loops         : true, // optimize loops            unused        : true, // drop unused variables/functions            hoist_funs    : true, // hoist function declarations            hoist_vars    : false, // hoist variable declarations            if_return     : true, // optimize if-s followed by return/continue            join_vars     : true, // join var declarations            cascade       : true, // try to cascade `right` into `left` in sequences            side_effects : true, // drop side-effect-free statements            warnings      : true, // warn about potentially dangerous optimizations/code            global_defs   : {}     // global definitions        }),        new HtmlWebpackPlugin({            template: './distTemplate.html',            filename:'dist.html'        })    ]};主要要改变的参数有entry和output两个参数，entry指定压缩代码的入口点，output指定要压缩成的文件运行npm run webPack便会生成压缩后的代码文件，运行时使用dist.html页面，加载速度会有显著提高
webpack配置:https://doc.webpack-china.org/guides/getting-started