写给后端程序员的前端开发流程与正确姿势.

写给后端程序员的前端开发流程与正确姿势.

关键词:node.js,npm,webpack,laravel mix,package.json,js代码压缩.

一直以来,后端程序员可能出于对前端的不太熟悉,尤其对于现代的前端工程化更不太熟悉.一看到nodejs,npm等名词就发懵.但后端程序员在实践中还是多多少少会接触前端的.可能你需要修改别人的前端代码,或自己开发前端代码(您可能是全栈程序员了).

想必你修改或写前端代码,也和我以前一样,直接从网上找模板(包括html,css.js)修改成自己样式.或自己从头写html.css.js.

不管是哪种类型,你一般是直接修改Html页面里引入的css.js吧:).

你可能也有些困惑 ,怎么别人的js代码看着像加密过似的,不知如何下手修改?

而你自己从头写的css,js则会直接被引入到Html页面里.

css,js代码里有一些注释,还有一些空格,空行等内容 ,直接在html页里引用是其实是没有经过压缩(去空格,去空行,去注释)的代码.会加大网络传输量,导致加载会慢一些.

而且,你写的js.没有经过压缩(去空格,注释,变量,函数重命名为短名称等),导致别人可能会偷盗你的代码.

如果你压缩了js后,再发布你的代码 ,而你的js看起来像经过加密一样,别人也基本看不懂你的代码了.

而你要做的就是开发代码与发布代码相分离.

本教程教你使用laravel-mix进行正确前端开发(注:laravel-mix最初是用于php框架laravel的前端资源编译工作 ,现在可用于任何语言的任何前端项目).

你项目的目录结构应该如下:

my-app/

----------index.html

-----------src/

----------------app.css

----------------app.js

-----------dist/

-----------------app.js

-----------------app.css

其中src为源码目录或开发目录,dist为发布目录,index.html为你的页面,

index.html通过以下代码引入发布的js与css.

<script src="dist/app.js"></script>

<link rel="stylesheet" href="dist/app.css">

此后,再修改js或css,应该只在src目录下修改.修改好后,再通过mix命令进行发布.

操作步骤:

一.安装node.js与npx.

1.安装node.js(安装好会自带npm)

2.安装npx:  npm install -g npx

二 在你的新建项目目录下执行

第一步:安装Mix

0. mkdir my-app && cd my-app

1. npm init -y
2. npm install laravel-mix --save-dev

第二步:创建一个Mix配置文件

3. touch webpack.mix.js

您现在应该具有以下目录结构：

• node_modules/
• package.json
• webpack.mix.js

第三步:定义你的编译:

打开webpack.mix.js并添加以下代码：

// webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').setPublicPath('dist');

mix.css('src/app.css', 'dist');

第四步:创建js.css文件

在src/目录下创建app.js,写入

// src/app.js

var dataTime ;

function play(){

var data = new Date();

dataTime = data.getFullYear()+"年"+data.getMonth()+"月"+data.getDate()+"日"+data.getHours()+"时"+data.getMinutes()+"分"+data.getSeconds()+"秒";

document.getElementById("time").innerHTML = dataTime;

}

setInterval(play,1000);

在src/目录下创建app.css,写入

/* src/app.css */

@import 'normalize.css';

body {

color: red;

}

#time{

color:#6f44e4f7;

width:80%;

height: 40px;

background-color:#e7e7e7;

margin:24px auto;

text-align: center;

font-size:2vw;

display: flex;

justify-content: center;

align-items: center;

}

.main{

color:#ff2a00f7;

width:80%;

height: 300px;

background-color:#e7e7e7;

margin:24px auto;

text-align: center;

font-size:2vw;

display: flex;

justify-content: center;

align-items: center;

}

在此示例中,请把normalize.css也放到src目录下.

第五步:编译发布.

 npx mix 或 npx mix --production

它会在dist目录下生成编译好的app.css,app.js文件 .可以直接在html页面里引用使用了.

在生产环境,建议使用 npx mix --production ,它会压缩css与js文件 .

关于Mix更多,请参考https://laravel-mix.com/

示例源码下载 https://github.com/w3yyb/backends-frontend