如何让 React 与 Grunt 和 Babel 一起工作?
Posted
技术标签:
【中文标题】如何让 React 与 Grunt 和 Babel 一起工作?【英文标题】:How to get React to work with Grunt and Babel? 【发布时间】:2017-01-20 02:50:29 【问题描述】:我正在尝试使用我们目前拥有的 Grunt 构建将 React 集成到当前项目中。
我去了 grunt-react https://www.npmjs.com/package/grunt-react,它说它已被弃用,我应该使用 grunt-babel。 https://github.com/babel/grunt-babel
编译 React 是否可以直接使用?我是否需要安装其他类似 babel-preset-react https://babeljs.io/docs/plugins/preset-react/ 的东西才能让它工作?
另外,我不确定如何设置我的 Gruntfile 来处理这个问题,目前我有:
babel:
options
sourceMap: true,
presets: ['es2015']
,
dist:
files: [
expand: true,
cwd: 'src/',
src: ['*.js'],
dest: 'dist/'
]
,
谢谢!
【问题讨论】:
【参考方案1】:希望您的解决方案仍然在这里回答,它将帮助一些需要工作的人对 grunt 和 babel 做出反应
首先确保您已安装以下内容:
npm install --save-dev grunt-babel babel-cli
Babel 的 Grunt 插件grunt-babel
npm install --save-dev babel-plugin-transform-es2015-modules-amd
npm install babel-preset-env --save-dev
npm install --save-dev babel-cli babel-preset-react
然后添加一个 grunt 任务/gruntfile 如下:
module.exports = function (grunt)
'use strict';
grunt.initConfig(
babel:
options:
sourceMap: false,
presets: ["env", "react"],
plugins: ["transform-es2015-modules-amd"]
,
dist:
files: [
expand: true,
cwd: './src',
src: ['*.js'],
dest: './generated',
ext: '.js'
]
);
grunt.loadNpmTasks('grunt-babel');
grunt.registerTask('default', ['babel']);
;
package.json
"devDependencies":
"babel-cli": "^7.0.0-beta.3",
"babel-core": "7.0.0-alpha.19",
"babel-plugin-transform-es2015-modules-amd": "^7.0.0-alpha.19",
"babel-preset-env": "^2.0.0-beta.2",
"babel-preset-es2015": "7.0.0-alpha.19",
"babel-preset-react": "^7.0.0-alpha.19",
"grunt-babel": "^7.0.0",
希望这会有所帮助。
已编辑
babel -> @babel
从 Babel 7 开始,Babel 团队切换到了作用域包,所以你现在必须使用 @babel/core 而不是 babel-core。
您的依赖项需要像这样修改:
babel-cli -> @babel/cli.例如:babel- 与@babel/。
package.json 如下所示:
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"grunt-babel": "^8.0.0",
【讨论】:
以上是关于如何让 React 与 Grunt 和 Babel 一起工作?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 React 设置 babel-plugin-react-css-modules?
将 webpack 与 babel 和 babel-preset-react 和 babel-preset-es2015 一起使用