如何搭建web前端框架
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服务器供别人使用。
3、新建一个index.html页面
首页
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'
})
]
};运行npm run webPack便会生成压缩后的代码文件，运行时使用dist.html页面，加载速度会有显著提高
webpack配置:https://doc.webpack-china.org/guides/getting-started