当前位置:首页 > 天道酬勤 > 正文内容

snowsuit(webpack打包流程)

张世龙2021年12月20日 03:14天道酬勤1250

引言

前几天我听到朋友在说snowpack,去看看这个包是干什么的,看看官网,这很有趣。 据说可以不使用打包工具(Webpack,Parcel ),在浏览器中实时显示代码结果。 让我们先看看下图。 有魅力吗?

snowpack以es模块为主。

为什么使用 snowpack

在ESM出现之前,JavaScript的模块化有各种各样的规格,主要有CommonJS、AMD、CMD、UMD等规格,最广泛的是Node.js的CommonJS,与module.exports 它是npm中的浏览器不直接支持这些模块,因此出现了打包工具(Webpack、Browserify、Parcel等)。

1 .在开发中是否遇到了webapp,需要经常等待看到结果。 每次保存电脑都是疯的。

2.webpack等打包工具非常强大,配置、插件、依赖成本低,创建任意react APP应用程序都会安装200M的依赖包,需要写很多行的webpack配置。

3.ESM在浏览器中使用了约5年,现在所有现代浏览器都支持(可以追溯到2018年初)。 使用ESM后,就不需要打包工具了。 无需Web包即可构建现代化、高性能、可用于生产的web APP应用

只需安装一次Webpack、Parcel等复杂的打包工具并运行,即可实现更快的开发环境,降低工具的复杂性。

环境支持

默认情况下,snowpack将npm依赖关系安装为ESM(ESM ),那么ESM模块的支持情况如何呢?

不要担心。 目前使用的浏览器有90%支持ESM语法。 从2018年初开始,所有现代浏览器(Firefox、Chrome、Edge、Safari )都支持ESM。

示例

环境需要:节点10

基础

说了这么多,就是方便。 那么,实际操作一下吧。

首先以react项目为例

mkdir知识库-演示

光碟-示范

纳米单位

依赖关系的安装

npmi @ babel/CLI @ babel /核心@ babel /预设-重设伺服器网路包- d

npmireact @ NPM : @ pika/react react-DOM @ NPM : @ pika/react-DOM-s

//src/index.js

导入后关系,从后关系;

从' react-DOM '导入最近的文档;

功能应用程序

返回

( <div>hello world</div> ); } window.addEventListener("load", () => ReactDOM.render(<App />, document.getElementById("app")) ); <div id="app"></div> <script type="module" src="/dist/index.js"></script> npx snowpack babel src/ --out-dir dist npx servor --reload

打开 http://localhost:8080

进阶

使用 css

由于浏览器不支持直接使用 JS 导入 CSS, 因此以下代码无法使用。

// ✘ NOT SUPPORTED OUTSIDE OF BUNDLERS import './style.css';

如果想要引入css, 需要通过 style 标签直接引入资源。

官方推荐的使用方式是

1.简单应用,使用内敛 style

2.复杂应用推荐使用 CSS-in-JS

因此这里采用 styled-components

npm i styled-components -S npx snowpack

修改 index.js

import React, { useState } from "react"; import ReactDOM from "react-dom"; import styled from 'styled-components'; const UI = styled.div` color: red ` function App() { return ( <UI> hello world </UI> ); } window.addEventListener("load", () => ReactDOM.render(<App />, document.getElementById("app")) );

修改下 package.json

"start": "babel src/ --out-dir dist --watch & servor --reload"npm run start

使用图片

// ✘ NOT SUPPORTED OUTSIDE OF BUNDLERS import './photo.png';

如今,没有浏览器支持直接从JS导入图像。相反,您将要使用以下库/解决方案之一:

<img src="/img/photo.png">

使用TypeScript

npm i @babel/preset-typescript typescript -D

修改 .babelrc

{ "presets": ["@babel/preset-react", "@babel/preset-typescript"], "plugins": [ "snowpack/assets/babel-plugin.js" ] }

将 src/index 修改成 src/index.tsx 并加入声明。

import React, { useState } from "react"; import ReactDOM from "react-dom"; import styled, { ThemeProvider } from 'styled-components'; const ThemeColor = { default: 'red' } interface Theme { themeColor: typeof ThemeColor } const UI = ({ children }: { children?: React.ReactNode }) => { return ( <> <ThemeProvider theme={ThemeColor}>{children}</ThemeProvider> </ > ); }; const AppStyle = styled.div<Theme>((props: Theme) => { console.log(props); return { color: props.theme.default } } ) function App() { return ( <UI> <AppStyle> hello world </AppStyle> </UI> ); } window.addEventListener("load", () => ReactDOM.render(<App />, document.getElementById("app")) );

修改 启动命令,让 babel 包含对 后缀 tsx 的转义。

{ "start": "babel src/ --out-dir dist --watch --extensions \".ts,.tsx,.js,.jsx\" & servor --reload" }

优化

默认情况下,snowpack会安装最小化的依赖关系并针对开发进行了优化。准备好进行生产时,请使用--optimize标志运行snowpack以启用某些仅针对生产的优化:

1.最小化依赖关系

2.转义低级语法

3.Tree-Shaking(通过--include启动自动模式)

4.支持旧版浏览 --nomodule

如果要构建单页应用程序(SPA),请使用--nomodule运行snowpack并传入应用程序入口点。然后,在你的应用程序中创建第二个脚本标签,带有nomodule 标识的入口。

<!-- Ignored by legacy browsers: --> <script type="module" src="/src/index.js"></script> <!-- Ignored by modern browsers: --> <script nomodule src="/web_modules/app.nomodule.js"></script>

完成此操作后,运行snowpack生成一个/web_modules/app.nomodule.js脚本,这个脚本会自动在旧的旧版浏览器上运行。

缓存处理

通过传入 addVersion

/* .babelrc */ "plugins": [ ["snowpack/assets/babel-plugin.js", {"addVersion": true}], ]

可以输出带有版本号的脚本

// src/ File Input import Foo from 'package-name'; // lib/ Babel Output import Foo from '/web_modules/package-name.js?v=1.2.3';

结尾

snowpack 优势

1.减少了打包的时间成本,只要一次 snowpack。修改源码能够实时反馈在浏览器上。2.代码可移植能力强,相当于纯写 JavaScript 语言。3.模块和源码相互独立,有点类似于 webpack 的 DDL。4.对于简单应用可以快速搭建,对于一些在线编辑的网站可以使用类似的方案进行构建。

snowpack 劣势

1.对 ES Modules 的依赖性强,在npm 上虽然 ES Modules 的包在逐渐增加,但是短期内需要包都需要做额外的处理。例如我想引入 Antd, 发现其中依赖了很多 CommonJS 的模块以及样式未使用 CSS-in-JS, 引入较为繁琐。

1.对于一些 css,images 资源处理不够友好,需要额外手动处理,并且底层使用 rollup 来进行一次 ES Modules 的导出太过于生硬, 没有强大的自定义的插件或者配置。

2.太多依赖包会造成网络问题

以上例子:https://github.com/hua1995116/snowpack-demo

对于现阶段的 snowpack 来说还是太年轻,但是年轻总是充满希望和可能。

https://mp.weixin.qq.com/s/hCigmhviknSTDgZYADB57Q

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/25345.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。