Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

实现 webpack 配置拆分 #4

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

luckyadam
Copy link
Member

@honlyHuang
Copy link

“当旧项目升级后运行报错时,需要给出清晰的错误提示,引导用户安装相关插件” 个人倾向于无感升级,而不是报错引导手工安装。「把复杂留给框架,把简单留给使用者」

@luckyadam
Copy link
Member Author

“当旧项目升级后运行报错时,需要给出清晰的错误提示,引导用户安装相关插件” 个人倾向于无感升级,而不是报错引导手工安装。「把复杂留给框架,把简单留给使用者」

无感升级需要自动安装依赖包,容易出错,这个操作还是给开发者吧

@yuche
Copy link
Contributor

yuche commented May 25, 2020

“当旧项目升级后运行报错时,需要给出清晰的错误提示,引导用户安装相关插件” 个人倾向于无感升级,而不是报错引导手工安装。「把复杂留给框架,把简单留给使用者」

无感升级需要自动安装依赖包,容易出错,这个操作还是给开发者吧

我个人也倾向于让开发者手动安装依赖包,但在「适配策略」上我们可以做得更多:
例如把旧版本开箱即用,无需配置的插件们做成一个 preset,在安转并在配置文件上添加一个 preset 即可。这样开发者赶项目或者不想深入了解插件功能的开发者也能简单升级。

@zhiqingchen
Copy link
Member

支持
对开发者,做好提示,按需定制即可吧

@Garfield550
Copy link
Contributor

Garfield550 commented May 25, 2020

  1. 旧项目的升级手动安装也能接受,不过需要完整的文档指南或者是提示,以及在 Issue 里可以检索到相关问题的解决方案(可以直接链接到文档,但是很多人喜欢直接搜 Issue,所以提出这个建议)。

  2. 关于 sass 建议是抛弃 C++ 的 node-sass,使用 Dart 的新版 sass 实现(npm 包名 sass),这样省去了很多因为 node-gyp 环境造成的问题。

  3. 希望编译器可以在缺少相关插件时有比较友好的提示,比如某用户使用 Less 开发应用,有一天他引入了 taro-ui 然后报错无法处理 sass 文件类型时,应当给出友好的提示(当然也可以在 taro-ui 侧提供 css 格式来解决问题)。

@zhiqingchen
Copy link
Member

node-sass 是挺麻烦的,这个方案好了以后就可以随心配置了

@Qiyu8
Copy link

Qiyu8 commented May 25, 2020

相当于webpack插件的微服务化,这里的每个拆分出来的插件有没有版本的概念?如果旧项目用的sass是1.0,升级插件sass版本是2.0的话,会有兼容性问题

@nanjingboy
Copy link
Member

支持。

@luckyadam
Copy link
Member Author

哈哈哈,讨论好激烈,我先回复几点~
1、@Qiyu8,道兄提到的问题, 插件还是有版本概念,这里抽出来的插件名比如 @tarojs/plugin-sass 可能会和 1.x 时代的插件同名,但是应该还好,因为这些插件目前在 2.x 和 3.x 里都是废弃状态,重新启用后会跟着 Taro 大版本走,应该不有冲突啥的
2、@Garfield550,升级提示和文档指南确实需要考虑清楚,首先出错的时候会给出比较明确的指引,其次在文档和 issue 中也会新增内容来方便检索;全换成 dart-sass 貌似有点问题,之前测试的是 dart-sass 不支持处理 wxss 等特殊后缀的小程序样式文件,所有如果这次要换的话我会整体再测试一下
3、@yuche 提到的升级方式可以考虑做好,尽量让开发者轻松升级~

@Garfield550
Copy link
Contributor

@luckyadam 你说的是在 sass 文件里使用 @import 语法引入 wxss 后缀的文件吗?我记得 sass 如果 @import './a.css'; 会编译出 @import url('./a.css'); 然后交给之后的 loader 如 css-loader 处理。webpack-contrib/sass-loader#101 以及相关的 spec https://github.com/sass/sass/blob/master/spec/modules.md#import-context

@luckyadam
Copy link
Member Author

@luckyadam 你说的是在 sass 文件里使用 @import 语法引入 wxss 后缀的文件吗?我记得 sass 如果 @import './a.css'; 会编译出 @import url('./a.css'); 然后交给之后的 loader 如 css-loader 处理。webpack-contrib/sass-loader#101 以及相关的 spec https://github.com/sass/sass/blob/master/spec/modules.md#import-context

嗯嗯,是这种情况,当时测试的 @import './a.wxss'; 如果是 wxss 就会识别不了,需要再测一下

@cncolder
Copy link

cncolder commented May 27, 2020

Dart Sass on Node is still substantially slower than on the Dart VM

替换也行, 建议新增 @tarojs/plugin-node-sass

毕竟二者在下载量上还有 300 倍差距 https://www.npmtrends.com/dart-sass-vs-node-sass
速度上相差 10 倍左右.

@cncolder
Copy link

cncolder commented Jun 16, 2020

站在初学者的角度, 提示信息需要更详细一些.

  • 插件怎么安装 npm i @tarojs/plugin-sass.
  • 插件怎么配置, 需要一段代码示例.
  • 是taro插件, 也是npm模块, 二者的概念有些混淆.
  • 给出的文档链接大部分用户打不开(原因你懂的).

54731592287022_ pic

@luckyadam
Copy link
Member Author

站在初学者的角度, 提示信息需要更详细一些.

  • 插件怎么安装 npm i @tarojs/plugin-sass.
  • 插件怎么配置, 需要一段代码示例.
  • 是taro插件, 也是npm模块, 二者的概念有些混淆.
  • 给出的文档链接大部分用户打不开(原因你懂的).

54731592287022_ pic

有道理,可以优化一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants