reactjs - Typescript Webpack React 编译导致只读文件系统错误,但开发服务器工作正常
问题描述
我目前正在尝试使用 React、Webpack 和 Typescript 编译我的项目。我的开发服务器正在工作,但是当我尝试运行 webpack 进行编译时,我得到以下信息:
> typescript_react@1.0.0 build /Users/brighton1101/code/typescript_react
> webpack
Error: EROFS: read-only file system, mkdir '/dist'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! typescript_react@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the typescript_react@1.0.0 build script.
我的 webpack 配置如下所示:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "production",
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
modules: ["components", "node_modules", "./"],
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx"]
},
"entry": {
app: './index.tsx',
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.ts(x?)$/,
//exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
'react': "React",
'react-dom': "ReactDOM"
},
plugins: [
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebpackPlugin({
title: 'Development',
template: './index.html'
}),
],
output: {
filename: 'bundle.js',
path: '/dist',
publicPath: '/dist'
},
devServer: {
contentBase: './',
compress: true,
port: 9000
}
};
我的打字稿配置:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}
我不确定为什么会出现此错误,但我很确定这与我的某种错误配置有关。
解决方案
您的output
配置不正确,它指向您的根目录。
试试这个:
const path = require('path');
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: path.resolve(__dirname, 'dist')
},
推荐阅读
- javascript - 在嵌套对象中显示键的函数?
- javascript - 反应:为不同的输入接收相同的值
- jquery - JQuery UI sortable 只能在一个方向上工作 鼠标在 flex-box 容器中移动
- excel - if语句中的VBA数组类型不匹配
- vba - 如何将多个范围复制到剪贴板?
- spring-boot - 如何在 Raspberry Pi 4 上创建容器化 Spring Boot 应用程序?
- javascript - 在这里返回活动
- java - 无法打开eclipse,因为安装了另一个java
- scheduled-tasks - 无法以编程方式注册具有实现 Runnable 接口的作业的 Deltaspike 调度程序
- php - 从服务器获取空图像