分享个人 Full-Stack JavaScript 项目开发经验
在文章使用webpack打包react应用程序中讲述了浏览器端的 React 组件的语法转换和打包过程。要使组件能在服务器端渲染，也必须使用 babel 转换成目前 node.js 版本支持的语法。下面介绍的方法就是，在开发过程中让 src 中的组件代码发生修改时，转译一份 node.js 端能直接使用的版本。它们就像原像和镜像一样，原像发生变化时，镜像跟着变化。
除了安装 babel 的核心模块、预设模块和插件外，我们还需要安装 grunt-babel 插件：
yarn add grunt-babel --dev安装 grunt-contrib-watch 文件监听插件：
yarn add grunt-contrib-watch --devGruntfile.js 的相关配置如下：
'use strict';
module.exports = function (grunt) {
const {dir} = require('./Grunt.config');
grunt.initConfig({
watch: {
watchNode: {
files: [
'Gruntfile.js',
'grunt.config.js',
`${dir.frontComponents}/**/*.js`
],
tasks: ['babel']
}
},
babel: {
options: {
sourceMap: false,
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-proposal-class-properties"]
},
dist: {
files: [{
expand: true,
cwd: `${dir.frontComponents}`,
src: ['**/*.js'],
dest: `${dir.nodeComponents}`
}]
}
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('babel-jsx', ['babel']);
grunt.registerTask('watch-node', ['watch:watchNode']);
}就这样，当运行 npm run watch 监听 src/front 下的 React 组件并打包时，同时运行 grunt watch-node，转译一份 node.js 支持的版本到 src/node 目录下。
在服务器端渲染组件时需要注意如下问题：