Scratch3.0二次开发的心得
经过一个月的努力，我基于Scratch3.0的开源代码完成了一整套的Scratch3.0的二次开发，其效果如下：
(这个是vue的项目，通过在该个人中心里打开作品，跳到Scratch3.0项目里，并实现作品打开)
（这是通过vue项目的个人中心跳转打开作品后的效果，主要是通过地址栏获取作品id）
（老师或者学生都可以对作品进行再次编辑保存，以及一开始创作时进行保存作品）
（这里是素材库角色的界面，所有素材都是通过调用接口变成了我们自己的素材，不是用官方的素材库。以及标签也是通过接口调用）
二次开发的主要功能有：
1.增加登录，注册、微信扫码登录，以及忘记密码
2.加载默认作品，并将Cat猫更换成自己公司的
3.素材库包括角色，造型，声音，背景；通过调接口获取素材，改变成从自己后台上传素材
4.保存作品到服务器
5.增加作品展示页面，在不同平台上展示作品
6.增加编辑已有作品功能，尤其是在不同平台上将作品打开
7.动态插入汉化的语言到Scratch的语言库
8.自定义默认角色
技术栈
前端部分基于scratch3.0的开源代码二次开发，要求对react+redux框架比较熟悉，能够理解项目结构与其组件架构思路。（其实我一开始对react一点都不熟悉，没办法就硬着头皮开发完成）
antd引入
react组件化开发难免要写很多基础效果的组件，比如模态框、错误提示信息等。
因为是个人项目没有UI设计，所以我觉得能省时省力、简洁高效即可，所以引入了antd组件库。
使用antd并不难，最难的还是如何引入antd到webpack编译环境中。
antd自身的css是全局名字，而我们开发项目一般是使用了css module的，为了避免影响到antd的css名字，我们需要分别对待：
{
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
camelCase: true
}
}]
}]
上面这段通过include指定了对于依赖的antd模块，没有采用css modules配置项。
而对于我们自己的项目则通过exclude排除掉antd，同时开启css modules：
{
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
camelCase: true
}
}]
}]
options里面的东西除了modules需要注意区分，其他选项根据自己项目配置即可。
另外babel-loader里也要求增加一个插件配置，其目的应该是自动加载antd组件依赖的css的意思：
{
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
camelCase: true
}
}]
}]
出售源码/服务
最近很多机构和个人找到我的微信，问我是否卖源码或者可以提供服务。
为了确保大家买得放心，买的公平，我在这里统一说明一下：
买源码：基本上是有研发能力的个人/机构，想透过源码了解核心解决方案，该方案采用买断制：提供源码与咨询，价格3万元。
有意向加微信详聊。
(这个是vue的项目，通过在该个人中心里打开作品，跳到Scratch3.0项目里，并实现作品打开)
（这是通过vue项目的个人中心跳转打开作品后的效果，主要是通过地址栏获取作品id）
（老师或者学生都可以对作品进行再次编辑保存，以及一开始创作时进行保存作品）
（这里是素材库角色的界面，所有素材都是通过调用接口变成了我们自己的素材，不是用官方的素材库。以及标签也是通过接口调用）
二次开发的主要功能有：
1.增加登录，注册、微信扫码登录，以及忘记密码
2.加载默认作品，并将Cat猫更换成自己公司的
3.素材库包括角色，造型，声音，背景；通过调接口获取素材，改变成从自己后台上传素材
4.保存作品到服务器
5.增加作品展示页面，在不同平台上展示作品
6.增加编辑已有作品功能，尤其是在不同平台上将作品打开
7.动态插入汉化的语言到Scratch的语言库
8.自定义默认角色
技术栈
前端部分基于scratch3.0的开源代码二次开发，要求对react+redux框架比较熟悉，能够理解项目结构与其组件架构思路。（其实我一开始对react一点都不熟悉，没办法就硬着头皮开发完成）
antd引入
react组件化开发难免要写很多基础效果的组件，比如模态框、错误提示信息等。
因为是个人项目没有UI设计，所以我觉得能省时省力、简洁高效即可，所以引入了antd组件库。
使用antd并不难，最难的还是如何引入antd到webpack编译环境中。
antd自身的css是全局名字，而我们开发项目一般是使用了css module的，为了避免影响到antd的css名字，我们需要分别对待：
{
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
camelCase: true
}
}]
}]
上面这段通过include指定了对于依赖的antd模块，没有采用css modules配置项。
而对于我们自己的项目则通过exclude排除掉antd，同时开启css modules：
{
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
camelCase: true
}
}]
}]
options里面的东西除了modules需要注意区分，其他选项根据自己项目配置即可。
另外babel-loader里也要求增加一个插件配置，其目的应该是自动加载antd组件依赖的css的意思：
{
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
camelCase: true
}
}]
}]
出售源码/服务
最近很多机构和个人找到我的微信，问我是否卖源码或者可以提供服务。
为了确保大家买得放心，买的公平，我在这里统一说明一下：
买源码：基本上是有研发能力的个人/机构，想透过源码了解核心解决方案，该方案采用买断制：提供源码与咨询，价格3万元。
有意向加微信详聊。
