如何搭建web前端框架

最新推荐文章于 2024-02-20 10:51:24 发布

B_etterwmj

最新推荐文章于 2024-02-20 10:51:24 发布

阅读量1w

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/B_etterwmj/article/details/78996625

版权

技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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 lang="zh-CN">
  <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

B_etterwmj

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
如何搭建web前端框架

1、确定项目使用的技术根据项目的需求等来选择使用的技术（这里以angular4 + typsescript + nodejs+mongodb举例）2、新建一个项目的工作文件夹使用npm init初始化项目，根据问题配置，一般是直接回车使用默认配置,生成package.json文件{ "name": "test_keyboard", "version": "1.0.0",
复制链接

扫一扫