Scratch二次开发——如何创建单独的Scratch作品展示页？

本文链接：https://blog.youkuaiyun.com/meterochan/article/details/105574982

如何创建单独的Scratch作品展示页？

创建展示页面的jsx文件？

配置webpack.config.js编译生成展示页面

创建展示页面的jsx文件？

创建project.jsx的内容和css样式，加入src/playground文件中。

const DEFAULT_PROJECT_ID = '80';

const Project = ({isPlayerOnly, projectId}) => (
    <Box className={classNames(styles.stageOnly)}>
        <GUI
            isPlayerOnly={isPlayerOnly}
            projectId={projectId}
            isCreator={false}
            isFullScreen={false}
        />
    </Box>
);

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(<WrappedProject isPlayerOnly/>, appTarget);

获取地址栏中的#id: const pid = window.location.hash.substring(1).

通过id请求后台显示指定的作品内容。

配置webpack.config.js编译生成展示页面

对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编程考级练习场'
})