1. 更新包版本
yarn upgrade -latest @byted-edu/question-react-render yarn add <package>@latest yarn add <package>@version
2. 安装
yarn add <package> // 安装开发依赖 yarn add <package> -D // 发版本 yarn publsih --tag <tagname>
3. npx
主要特点:
1、临时安装可执行依赖包,不用全局安装,不用担心长期的污染。
2、可以执行依赖包中的命令,安装完成自动运行。
3、自动加载node_modules
中依赖包,不用指定$PATH
。
4、可以指定node
版本、命令的版本,解决了不同项目使用不同版本的命令的问题。
4. 打包压缩
- entry
- 防止重复
- 动态导入
- 预加载
- bundle分析
5.babel
将高版本es6+语法转低版本es5支持的code
- 语法层:let、const。。。
- Preset-env
- API层:Promise,includes原型链上定义的新方法
- Pollyfill
5.1 配置文件
// .babelrc
{
presets: ["@babel/preset-env"]
}
5.2 pollyfill
使用pollyfill处理api层
但是并不想引入全量的垫片,所以
5.2.1 useBuiltIns
- false:默认值,不操作pollyfill
- entry:根据target中浏览器版本的支持,将pollyfills拆分引入,仅引入指定浏览器不支持API的pollyfill
- usage:新,检测ES6/7/8等的使用情况,仅仅加载代码中用到的polyfills
{ presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, }, ], ], }
5.2.2 @babel/plugin-transform-runtime
- 解决代码冗余,该插件会复用babel注入的辅助函数,这些辅助函数在@babel/runtime中,需增加该依赖
yarn add @babel/runtime @babel/plugin-transform-runtime -D
{ presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, }, ], ], plugins: [['@babel/plugin-transform-runtime']], }
- 解决全局污染
在文件头引入的core-js的pollyfill必然会导致全局污染,例如Array.from()等会修改全局对象的原型prototype
解决方式:将core-js给transform-runtime处理
{ presets: [ ['@babel/preset-env' ], plugins: [['@babel/plugin-transform-runtime', { 'corejs': 3 }]], }
5.3 总结示例
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "targets": { "ie": 10 } } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3 } ] ] }
上一篇
值得一学的SVG
值得一学的SVG
版权声明:《 关于前端打包管理的一些概念 》为DYBOY原创文章,转载请注明出处!
最后编辑:2020-12-14 10:12:06