antecedentes
La evolución de la ingeniería de front-end no es independiente. Está estrechamente relacionada con otros campos de front-end y crece en conjunto. A continuación, se presentarán los antecedentes del desarrollo de front-end desde varias dimensiones.
Evolución de la carrera de front-end
ES evolución
modo de desarrollo
Ingeniería de frente
Edad de piedra (JSP/PHP/modo de archivo único)
La demanda del front-end es débil, la página es relativamente simple y no hay muchas herramientas auxiliares en el proceso de desarrollo. Es necesario obtener una vista previa manual del archivo y actualizar el código. El código del front-end está "decorado". en el código como PHP.
(La era es demasiado larga, aquí hay una imagen para que todos la experimenten)
Edad de bronce (herramientas de agrupación para pilas que no son JS)
introducción experta
Paquete maven jar/aar interno de la empresa host para brindar soporte para el cliente u otra versión del programa java. Maven es una herramienta de automatización de compilación utilizada principalmente para proyectos Java. Maven también se puede usar para crear y administrar proyectos escritos en C#, Ruby, Scala y otros lenguajes. El proyecto Maven está alojado en Apache Software Foundation, que anteriormente formaba parte del Proyecto Jakarta.
Compresor YUI
YUI Compressor era una herramienta de compresión front-end proporcionada por el gigante de la industria yahoo en ese momento Además de Compressor, Yahoo también proporcionaba muchas herramientas relacionadas con front-end y bibliotecas de componentes en ese momento.
Un pequeño ejemplo de maven packaging 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>
复制代码Resumir
El código de front-end se administrará como parte del proyecto de back-end mediante herramientas como maven y se publicará en el proyecto de back-end correspondiente.
Durante el proceso de empaquetado, js y css solo pueden empaquetarse y comprimirse de manera simple, y no pueden administrarse más.
Silver Age (herramienta de empaquetado de pilas de tecnología JS)
Escriba secuencias de comandos de tareas escribiendo bash o nodejs para lograr una actualización en caliente imperativa (HMR) y un empaquetado automático, que representa: Grunt, Gulp;
Introducción a Grunt
Sitio web oficial de referencia: www.gruntjs.net/getting-sta…
Un pequeño ejemplo de empaque Grunt
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 ]);
};
复制代码Resumir
La herramienta de empaquetado de la pila de tecnología JS, el front-end puede implementar su propia herramienta de empaquetado basada en el nodo, y los puntos de función son similares a los de la pila de tecnología que no es js.
Edad de oro (paquete)
基于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那么突破，所以定义为后黄金时代。
未来
Hay muchas direcciones para el futuro de la ingeniería front-end. Están Modern.js ( modernjs.dev/ ), que se compromete a proporcionar un nuevo sistema de ingeniería. También están aquellos que quieren lograr una dirección de canalización más automática e inteligente . desde la perspectiva de la eficiencia, pero combinado con otros lenguajes Proceso de ingeniería, como Java: blog.csdn.net/nalw2012/ar... La evolución de la ingeniería también puede necesitar depender de la evolución de todo el ecosistema para tener más progreso revolucionario.
❤️ Gracias por su apoyo
Lo anterior es todo el contenido de este intercambio, espero que te ayude ^_^
Si te gusta, no olvides compartir, dar me gusta y marcar como favorito .
Bienvenido a prestar atención al equipo de ELab de cuenta pública para cosechar los buenos artículos de primera mano de la gran fábrica ~
Somos de ByteDance, que es el departamento de front-end de vigorosa educación, y es responsable del desarrollo de front-end de todos los productos de ByteDance Education.
Acumulamos y difundimos conocimientos y casos profesionales en la dirección de la mejora de la calidad del producto, la eficiencia del desarrollo, la creatividad y la tecnología de punta, y aportamos valor de experiencia a la industria. Incluyendo, entre otros, monitoreo de rendimiento, biblioteca de componentes, tecnología multiterminal, sin servidor, construcción visual, audio y video, inteligencia artificial, diseño y marketing de productos, etc.
ByteDance escuela/código de reclutamiento social: TTMW2E7
Enlace de entrega: job.toutiao.com/s/N5NBFEq