배경
프론트엔드 엔지니어링의 발전은 독립적이지 않고 다른 프론트엔드 분야와 밀접하게 연관되어 함께 성장합니다.다음은 여러 차원에서 프론트엔드 개발 배경을 소개합니다.
프론트 엔드 경력 진화
ES 진화
개발 모드
프론트엔드 엔지니어링
석기 시대(JSP/PHP/단일 파일 모드)
프론트 엔드에 대한 수요가 약하고 페이지가 비교적 단순하며 개발 과정에서 보조 도구가 많지 않습니다. 수동으로 파일을 미리보고 코드를 새로 고칠 필요가 있습니다. 프론트 엔드 코드는 "장식" PHP와 같은 코드에서.
(시대가 너무 길다, 모두가 경험할 수 있는 사진이 있다)
청동기 시대(비JS 스택용 번들 도구)
메이븐 소개
클라이언트 또는 기타 Java 프로그램 릴리스를 지원하기 위한 호스트 회사의 내부 maven jar/aar 패키지. Maven은 주로 Java 프로젝트에 사용되는 빌드 자동화 도구입니다. Maven은 또한 C#, Ruby, Scala 및 기타 언어로 작성된 프로젝트를 빌드하고 관리하는 데 사용할 수 있습니다. Maven 프로젝트는 이전에 Jakarta 프로젝트의 일부였던 Apache Software Foundation에서 호스팅합니다.
유이 압축기
YUI Compressor는 당시 업계의 거물 야후가 제공한 프론트엔드 압축 도구였으며, 당시 야후는 Compressor 외에도 많은 프론트엔드 관련 도구와 컴포넌트 라이브러리를 제공했습니다.
maven 패키징 js의 작은 예
<plugins>
<plugin>
<!-- YUI Compressor Maven压缩插件 -->
<groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>1.5.1</version>
<executions>
<execution>
<goals>
<goal>compress</goal>
</goals>
</execution>
</executions>
<configuration>
<!-- 读取js,css文件采用UTF-8编码 -->
<encoding>UTF-8</encoding>
<!-- 不显示js可能的错误 -->
<jswarn>false</jswarn>
<!-- 若存在已压缩的文件，会先对比源文件是否有改动 有改动便压缩，无改动就不压缩 -->
<force>false</force>
<!-- 在指定的列号后插入新行 -->
<linebreakpos>-1</linebreakpos>
<!-- 压缩之前先执行聚合文件操作 -->
<preProcessAggregates>true</preProcessAggregates>
<!-- 压缩后保存文件后缀 无后缀 -->
<nosuffix>true</nosuffix>
<!-- 源目录，即需压缩的根目录 -->
<sourceDirectory>src/main/static</sourceDirectory>
<!-- 输出目录，即压缩后的目录-->
<outputDirectory>target/classes</outputDirectory>
<force>true</force>
<!-- 压缩js和css文件 -->
<includes>
<include>**/*.js</include>
<include>**/*.css</include>
</includes>
<!-- 以下目录和文件不会被压缩 -->
<excludes>
<exclude>**/*.min.js</exclude>
<exclude>**/*.min.css</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
复制代码요약하다
프론트엔드 코드는 maven과 같은 도구에 의해 백엔드 프로젝트의 일부로 관리되고 해당 백엔드 프로젝트에 게시됩니다.
패키징 과정에서 js와 css는 단순 패키징 및 압축만 가능하며 더 이상 관리할 수 없습니다.
Silver Age(JS 기술 스택 패키징 도구)
명령형 핫 업데이트(HMR) 및 자동 패키징을 달성하기 위해 bash 또는 nodejs를 작성하여 태스크 스크립트를 작성합니다. Grunt, Gulp;
그런트 소개
공식 홈페이지 참조: www.gruntjs.net/getting-sta…
그런트 패키징의 작은 예
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON( package.json ),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today( yyyy-mm-dd ) %> */\n',
},
build: {
src: build/index.js ,
dest: build/<%= pkg.name %>.min.js ,
},
},
concat: {
build/index.js : [ src/foo.js , src/bar.js ],
},
});
// 加载包含 uglify 任务的插件。
grunt.loadNpmTasks( grunt-contrib-uglify );
// 加载包含 concat 任务的插件。
grunt.loadNpmTasks( grunt-contrib-concat );
// 默认被执行的任务列表。
grunt.registerTask( default , [ concat , uglify ]);
};
复制代码요약하다
JS 기술 스택의 패키징 도구인 프런트 엔드는 노드 기반으로 자체 패키징 도구를 구현할 수 있으며 기능 포인트는 non-js 기술 스택과 유사합니다.
골든 에이지(번들)
基于Bundle的概念，借用babel的能力，让js文件按模块的方式进行打包，实现了HMR、以及各类处理器，让前端的工程化脱离了简单的压缩合并，转入了更加丰富的黄金时间，代表：Webpack、Rollup；
一个webpack的小例子
var webpack = require('webpack');var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin')var CleanWebpackPlugin = require('clean-webpack-plugin')var ExtractTextPlugin = require('extract-text-webpack-plugin')var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')const VENOR = [ faker ,
lodash ,
react ,
react-dom ,
react-input-range ,
react-redux ,
redux ,
redux-form ,
redux-thunk ,
react-router ]module.exports = {
entry: {
bundle: './src/index.js',
vendor: VENOR
},
// 如果想修改 webpack-dev-server 配置，在这个对象里面修改
devServer: {
port: 8081
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[hash:7].[ext]'
}
}]
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
// 这边其实还可以使用 postcss 先处理下 CSS 代码
loader: 'css-loader'
}]
})
},
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'manifest'],
minChunks: Infinity
}),
new CleanWebpackPlugin(['dist/*.js'], {
verbose: true,
dry: false
}),
new HtmlWebpackPlugin({
template: 'index.html'
}),
// 生成全局变量
new webpack.DefinePlugin({
process.env.NODE_ENV : JSON.stringify( process.env.NODE_ENV )
}),
// 分离 CSS 代码
new ExtractTextPlugin( css/[name].[contenthash].css ),
// 压缩提取出的 CSS，并解决ExtractTextPlugin分离出的 JS 重复问题
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// 压缩 JS 代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]};
复制代码总结
正如webpack官网的banner图描述，这个节点前端构建脱离了简单的文件拼接压缩，真正触摸到了js间的关联，提供了更科学的工程化方案。
后黄金时代（Bundleless）
在Bundle的基础上，结合浏览器解析原生ESM模块的特性，实现Bundleless的开发预览及热更新(HMR)，直接不打包发布或采用webpack等集成式工具兼容打包，代表：esbuild、snowpack。
snowpack介绍
官网介绍（from www.snowpack.dev/）：
Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Snowpack leverages JavaScript's native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows.
一个snowpack的小例子
/** @type {import( snowpack ).SnowpackUserConfig } */
export default {
mount: {
public: { url: '/', static: true },
src: { url: '/dist' },
},
plugins: [
'@snowpack/plugin-react-refresh',
'@snowpack/plugin-dotenv',
[
'@snowpack/plugin-typescript',
{
/* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */
...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),
},
],
],
routes: [
/* Enable an SPA Fallback in development: */
// { match : routes , src : .* , dest : /index.html },
],
optimize: {
/* Example: Bundle your final build: */
// bundle : true,
},
packageOptions: {
/* ... */
},
devOptions: {
/* ... */
},
buildOptions: {
/* ... */
},
};
复制代码总结
思路上和webpack接近，解决了很多webpack的痛点，但是概念是没有grunt->webpack那么突破，所以定义为后黄金时代。
未来
프론트엔드 엔지니어링의 미래에 대한 많은 방향이 있습니다 .새로운 엔지니어링 시스템을 제공하기 위해 노력하는 Modern.js( modernjs.dev/ ) 가 있으며, 보다 자동화되고 스마트한 파이프라인 방향을 달성하려는 사람들도 있습니다 . 효율성의 관점에서 볼 수 있지만 다른 언어와 결합 Java와 같은 엔지니어링 프로세스: blog.csdn.net/nalw2012/ar... 엔지니어링의 진화는 더 많은 것을 얻기 위해 전체 생태계의 진화에 의존해야 할 수도 있습니다. 혁명적 진보.
❤️ 응원해주셔서 감사합니다
위의 내용은 이 공유의 전체 내용입니다. 도움이 되셨으면 합니다. ^_^
마음에 드셨다면 공유, 좋아요, 즐겨찾기 잊지마세요 .
큰 공장의 좋은 물건을 직접 수확 하기 위해 공개 계정 ELab 팀 에 관심을 가져 주셔서 감사합니다~
활발한 교육의 프론트엔드 부서인 바이트댄스 출신으로 바이트댄스 교육의 모든 제품의 프론트엔드 개발을 담당하고 있습니다.
제품의 품질향상, 개발효율성, 창의성, 첨단기술의 방향으로 전문지식과 사례를 축적·보급하며, 경험의 가치를 업계에 기여합니다. 성능 모니터링, 구성 요소 라이브러리, 다중 터미널 기술, 서버리스, 시각 구성, 오디오 및 비디오, 인공 지능, 제품 디자인 및 마케팅 등을 포함하되 이에 국한되지 않습니다.
ByteDance 학교/사회 모집 코드: TTMW2E7
배송 링크: job.toutiao.com/s/N5NBFEq