taro-rfcs icon indicating copy to clipboard operation
taro-rfcs copied to clipboard

实现 webpack 配置拆分

Open luckyadam opened this issue 5 years ago • 14 comments

完整提案请看: https://github.com/NervJS/taro-rfcs/blob/split-webpack-config/rfcs/0000-split-webpack-config.md

luckyadam avatar May 25 '20 07:05 luckyadam

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

honlyHuang avatar May 25 '20 07:05 honlyHuang

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

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

luckyadam avatar May 25 '20 08:05 luckyadam

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

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

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

yuche avatar May 25 '20 08:05 yuche

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

zhiqingchen avatar May 25 '20 09:05 zhiqingchen

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

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

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

Garfield550 avatar May 25 '20 09:05 Garfield550

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

zhiqingchen avatar May 25 '20 09:05 zhiqingchen

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

Qiyu8 avatar May 25 '20 09:05 Qiyu8

支持。

nanjingboy avatar May 26 '20 01:05 nanjingboy

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

luckyadam avatar May 26 '20 07:05 luckyadam

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

Garfield550 avatar May 26 '20 11:05 Garfield550

@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 就会识别不了,需要再测一下

luckyadam avatar May 26 '20 12:05 luckyadam

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 avatar May 27 '20 18:05 cncolder

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

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

54731592287022_ pic

cncolder avatar Jun 16 '20 06:06 cncolder

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

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

54731592287022_ pic

有道理,可以优化一下

luckyadam avatar Jul 03 '20 06:07 luckyadam