创建project.jsx的内容和css样式,加入src/playground文件中。
const DEFAULT_PROJECT_ID = '80'; const Project = ({isPlayerOnly, projectId}) => (
); Project.propTypes = { isPlayerOnly: PropTypes.bool, projectId: PropTypes.string }; const mapStateToProps = state => { const pid = window.location.hash.substring(1) || DEFAULT_PROJECT_ID; return{ isPlayerOnly: state.scratchGui.mode.isPlayerOnly, projectId:pid } }; const mapDispatchToProps = dispatch => ({ onSeeInside: () => dispatch(setPlayer(false)) }); const ConnectedProject = connect( mapStateToProps, mapDispatchToProps )(Project); // note that redux's 'compose' function is just being used as a general utility to make // the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's // ability to compose reducers. const WrappedProject = compose( AppStateHOC, HashParserHOC )(ConnectedProject); const appTarget = document.createElement('div'); document.body.appendChild(appTarget); ReactDOM.render( , appTarget); 获取地址栏中的#id: const pid = window.location.hash.substring(1).
通过id请求后台显示指定的作品内容。
对webpack.config.js 的module.exports=[] 进行修改配置,然后 npm run build重新编译scratch (react.js)
defaultsDeep({}, base, {
entry: {
'lib.min': ['react', 'react-dom'],
'gui': './src/playground/index.jsx',
'blocksonly': './src/playground/blocks-only.jsx',
'compatibilitytesting': './src/playground/compatibility-testing.jsx',
'player': './src/playground/player.jsx',
'project': './src/playground/project.jsx'
},
plugins: base.plugins.concat([
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
'process.env.DEBUG': Boolean(process.env.DEBUG),
'process.env.GA_ID': '"' + (process.env.GA_ID || 'UA-000000-01') + '"'
}),
new HtmlWebpackPlugin({
chunks: ['lib.min', 'gui'],
template: 'src/playground/index.ejs',
title: '小小鲁创客Scratch编程考级练习场',
sentryConfig: process.env.SENTRY_CONFIG ? '"' + process.env.SENTRY_CONFIG + '"' : null
}),
new HtmlWebpackPlugin({
chunks: ['lib.min', 'blocksonly'],
template: 'src/playground/index.ejs',
filename: 'blocks-only.html',
title: '小小鲁创客Scratch编程考级练习场: Blocks Only Example'
}),
new HtmlWebpackPlugin({
chunks: ['lib.min', 'compatibilitytesting'],
template: 'src/playground/index.ejs',
filename: 'compatibility-testing.html',
title: '小小鲁创客Scratch编程考级练习场: Compatibility Testing'
}),
new HtmlWebpackPlugin({
chunks: ['lib.min', 'player'],
template: 'src/playground/index.ejs',
filename: 'player.html',
title: '小小鲁创客Scratch编程考级练习场: Player Example'
}),
new HtmlWebpackPlugin({
chunks: ['lib.min', 'project'],
template: 'src/playground/index.ejs',
filename: 'project.html',
title: '小小鲁创客Scratch编程考级练习场'
}),
new CopyWebpackPlugin([{
from: 'static',
to: 'static'
}]),
new CopyWebpackPlugin([{
from: 'node_modules/scratch-blocks/media',
to: 'static/blocks-media'
}]),
new CopyWebpackPlugin([{
from: 'extensions/**',
to: 'static',
context: 'src/examples'
}]),
new CopyWebpackPlugin([{
from: 'extension-worker.{js,js.map}',
context: 'node_modules/scratch-vm/dist/web'
}])
])
})
将创建的单页面prject.jsx配置进去,chunks:['lib.min','project']. lib.min.jsx属于库依赖。
主要修改defaultsDeep的两个字段
entry
plugins
新加入部分
'project': './src/playground/project.jsx'
new HtmlWebpackPlugin({
chunks: ['lib.min', 'project'],
template: 'src/playground/index.ejs',
filename: 'project.html',
title: '小小鲁创客Scratch编程考级练习场'
})
完成的成品:https://www.10jifen.com/scratch/project.html#128
关于scratch3.0二次开发继续更新,希望对大家有帮助。
最近很多机构和个人找到我的微信,问我是否卖源码或者可以提供服务。
为了确保大家买得放心,买的公平,我在这里统一说明一下:
有意向加微信详聊。
如果文章帮助了你,请在右边点击打赏5C币,感谢!