React 自动重新编译 WebStorm

Question

我正在使用 WebStorm 进行 react.js 应用程序开发。我用create-react-app 创建了起始项目。 Ctrl + S 可以很好地刷新更改和重新编译，但在 WebStorm 中保存是自动的，它并不总是启动。

我尝试使用 Babel 设置 File Watcher，但箭头函数存在一些问题。 ES2015 应该允许它们。

在那之后，我尝试了 webpack，然后事情变得如此糟糕，以至于我不得不清除所有内容并克隆我的 repo 并再次设置依赖项...... 第一个问题是箭头函数，然后是 CSS，然后是图像，然后...... js 由于 MIME 不兼容而被阻止......

webpack.conf.js：

var config = {
	entry: './main.js',

	output: {
		path:'/',
		filename: 'public/index.js',
	},

	devServer: {
		inline: true,
		port: 8080
	},

	module: {
		loaders: [
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				loader: 'babel-loader',

				query: {
					plugins: ['transform-runtime','transform-class-properties'],
					presets: ['es2015', 'react']
				}
			},{ test: /\.svg$/, loaders: ['babel?presets[]=react', 'svg-jsx'] }
		]
	}
}

module.exports = config;

package.json

var config = {
	entry: './main.js',

	output: {
		path:'/',
		filename: 'public/index.js',
	},

	devServer: {
		inline: true,
		port: 8080
	},

	module: {
		loaders: [
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				loader: 'babel-loader',

				query: {
					plugins: ['transform-runtime','transform-class-properties'],
					presets: ['es2015', 'react']
				}
			},{ test: /\.svg$/, loaders: ['babel?presets[]=react', 'svg-jsx'] }
		]
	}
}

module.exports = config;

我不知道要包含哪些文件，所以在 cmets 中询问并添加它们。

我想要什么？ 当我更改文件中的某些内容时，我想要自动刷新/重新编译。就像 Ctrl + S 功能承诺一样。我希望在 WebStorm 中做到这一点。那个文件观察器看起来更容易修复。

编辑1： 我尝试禁用 safe write（相同的 webpack conf，错误列表如下）：

ERROR in ./src/index.css
Module parse failed: D:\WebstormProjects\reactive-poet\src\index.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|   margin: 0;
|   padding: 0;
 @ ./src/index.js 19:0-22
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

ERROR in ./src/App.css
Module parse failed: D:\WebstormProjects\reactive-poet\src\App.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root{
| 	--app-width: 600px;
| 	--app-height: 600px;
 @ ./src/App.js 37:0-20
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

ERROR in ./~/bootstrap/dist/css/bootstrap-theme.css
Module parse failed: D:\WebstormProjects\reactive-poet\node_modules\bootstrap\dist\css\bootstrap-theme.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|  */
| .btn-default,
| .btn-primary,
| .btn-success,
 @ ./src/index.js 5:0-49
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: D:\WebstormProjects\reactive-poet\node_modules\bootstrap\dist\css\bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
|   font-family: sans-serif;
|   -webkit-text-size-adjust: 100%;
 @ ./src/index.js 3:0-43
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

ERROR in ./src/App.js
Module not found: Error: Can't resolve 'svg-jsx' in 'D:\WebstormProjects\reactive-poet'
 @ ./src/App.js 53:12-41
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js

ERROR in ./src/tools/transitions/animations.css
Module parse failed: D:\WebstormProjects\reactive-poet\src\tools\transitions\animations.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .react-transitions-top {
| 	z-index: 99 !important;
| }
 @ ./src/App.js 35:0-45
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js
webpack: Failed to compile

Answer 1

解决方案一（由 Michael Jungo 提示）： 在 Webstorm 选项>外观和行为>系统设置>取消勾选“安全写入”中禁用safe-write

方案二（针对babel filewatcher）：

1. 运行npm install --save-dev babel-plugin-transform-class-properties
2. 将--plugins transform-class-properties 添加到文件观察程序参数中。

两者都可以在 React 应用网站上更轻松地刷新更改。第一个手动第二个自动。我是新手，可能不明白到底发生了什么，但如果我不必总是重启服务器，它会使开发更容易。