Webpack/Babel 转换的.js文件具有错误的 MIME 类型("text/html"而不是"text/javascript")

当运行 webpack/babel 和 node.js 对于一个简单的 "Hello World" react.js 组件，转换后的 .js 文件显然不会作为正确的 MIME 类型返回：

Chrome 开发者工具反馈：

"拒绝执行来自'https://example.com/dev/test-app/transformed.js'的脚本，因为它的 MIME 类型('text/html')不可执行，并且启用了严格的 MIME 类型检查。">

在精简和更正配置文件并仔细阅读文档和 StackOverflow 答案后，我仍然无法解决此问题或在任何地方找到解决此特定问题。 (任何见解都受到重视和赞赏;我是 Node.js、Webpack、Babel 和 React.js 的新手。

app/index_template.html：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test App</title>
<script type="text/babel" src="index.js"></script>
</head>
<body>
<div id="app"></div>    
</body>
</html>

应用/索引.js：

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld.js';
ReactDOM.render(
<HelloWorld />,
document.getElementById('app')
);

app/components/HelloWorld.js：

import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Testing....</h1>;
}
}    
export default HelloWorld;

package.json：

{
"name": "test-app",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "webpack",
"start": "node server.js",
"dev": "webpack && npm start"
},
"dependencies": {
"axios": "^0.17.1",
"body-parser": "~1.18.2",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.15.5",
"morgan": "~1.9.0",
"pg": "^7.4.0",
"pug": "2.0.0-beta11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"serve-favicon": "~2.4.5"
},
"devDependencies": {
"@babel/preset-env": "^7.0.0-beta.35",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"nodemon": "^1.12.5",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}

webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: path.join(__dirname, 'app/index_template.html'),
filename: path.join(__dirname, 'app/index.html'),
inject:   'body'
});

var fs = require('fs');
var nodeModules = {};
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
.filter(x => ['.bin'].indexOf(x) === -1)
.forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });
// Ref: https://stackoverflow.com/questions/31102035/how-can-i-use-webpack-with-express

module.exports = [
{
name: 'server',
entry: path.join(__dirname, 'server.js'),
target: 'node',
output: {
path: path.join(__dirname, 'dist/server'),
filename: 'server.js'
},
externals: nodeModules
},
{
name: 'client',
entry: path.join(__dirname, 'app/index.js'),
output: {
path: path.join(__dirname, 'app'),
filename: 'transformed.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'env']
}
}
]
},
plugins: [HTMLWebpackPluginConfig]
}
];

[编辑：]

问题出在 Node.js 级别;编辑了我的服务器.js以显式传递.js文件的 MIME 类型：

[....]
var app = express();
[....]
app.get('*', function (req, res) {
var p = req.path.replace(/^//, '').replace(//$/, '');
if (p && p.endsWith('.js')) {
var options = { headers: {'content-type': 'application/javascript'} };
res.sendFile(path.join(__dirname, 'app', p), options);
} else
res.sendFile(path.join(__dirname, 'app', 'index.html'));
});

(这让我觉得有点笨拙;我以后可能会尝试提出一个更优雅的解决方案。

我假设这一点可能是错误的，但错误与对"example.com"的请求有关 - 你只是在这里使用它来说明请求吗？如果没有，则需要替换为当前域，例如"http://localhost:3000/dev/test-app/transformed.js"。 Example.com 只会返回 HTML 内容作为演示。

相关内容

最新更新

热门标签：