Webpack构建或TypeScript正在我的SRC中创建JS文件 [英] Webpack build or TypeScript is creating JS files right in my SRC
问题描述
我不理解正在做什么.这似乎不正常吗?构建后,我会为每个 .tsx
或 .ts
文件生成一个 .js
文件,但是我的来源.显然,我应该只在构建中看到.js文件.
I don't undrestand what's doing this. This doesn't seem normal right? I am getting a .js
file generated for every .tsx
or .ts
file after I build but this shouldn't be in my source. I should only see .js files in my build obviously.
我的脚本
"start": "PORT=3000 nodemon --trace-warnings --experimental-json-modules --no-warnings dist/server/server.js",
"build": "NODE_ENV=production yarn lint && yarn copyData && yarn compile-server && yarn start & webpack -p --env=prod --watch",
"dev": "NODE_ENV=development yarn lint && yarn copyData && yarn compile-server && yarn start & webpack-dev-server -d --watch",
./ webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const html = () =>
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/client', 'index.html'),
filename: 'index.html',
hash: true,
});
const copyAllOtherDistFiles = () =>
new CopyPlugin({
patterns: [
{ from: 'src/client/assets', to: 'lib/assets' },
{ from: 'package.json', to: './' },
{ from: 'ext/ink-3.1.10/js/ink-all.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/js/autoload.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/css/ink-flex.min.css', to: 'lib/css' },
{ from: 'ext/js/jquery-2.2.3.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/fonts', to: 'lib/css/fonts' },
{ from: 'feed.xml', to: './' },
],
});
module.exports = {
entry: './src/client/index.tsx',
output: {
filename: 'scripts/app.[hash].bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
devtool: 'source-map',
devServer: {
open: true,
writeToDisk: false,
publicPath: '/',
compress: true,
historyApiFallback: {
index: '/',
},
stats: 'errors-only',
proxy: {
'/api': {
target: 'http://localhost:3000',
secure: false,
changeOrigin: true,
logLevel: 'debug',
},
},
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(tsx|ts)?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.less$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../../',
outputPath: 'lib/css',
},
},
'css-loader',
],
},
{
test: /\.(woff(2)?|ttf|eot|otf|svg)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '/lib/css/fonts', // <--resolve the path in css files
outputPath: 'lib/css/fonts', // <-- path to place font files
},
},
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader'],
},
],
},
plugins: isProduction
? [
new CleanWebpackPlugin(),
copyAllOtherDistFiles(),
new MiniCssExtractPlugin({
filename: 'lib/css/[name].[hash].css',
}),
html(),
]
: [
copyAllOtherDistFiles(),
new MiniCssExtractPlugin({
filename: 'lib/css/[name].[hash].css',
}),
html(),
],
};
./ tsconfig.json
{
"compilerOptions": {
"target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "es2020", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": ["es5", "es6", "dom"], /* Specify library files to be included in the compilation. */
"moduleResolution": "node",
"allowJs": false, /* Allow javascript files to be compiled. */
"jsx": "react",
"noImplicitAny": false,
"sourceMap": false, /* Generates corresponding '.map' file. */
"rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
"removeComments": true, /* Do not emit comments to output. */
"strict": true, /* Enable all strict type-checking options. */
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"typeRoots": [
"node_modules/@types"
], /* List of folders to include type definitions from. */
"esModuleInterop": true,
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
"resolveJsonModule": true,
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true,
},
"include": [
"src"
],
"exclude": [
"/node_modules",
"/src/server",
"/src/client/js/ink-config.js",
"**/test",
"dist"
]
}
./src/server/ tsconfig.json
./src/server/tsconfig.json
{
"extends": "../../tsconfig",
"compilerOptions": {
"outDir": "../../dist/server", /* Redirect output structure to the directory. */
"rootDir": "." /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
},
"module": "commonjs",
"include": ["./*.ts"],
"resolveJsonModule": true
}
推荐答案
我的解决方案是:
- 由于我在webpack中使用了
ts-loader
,因此它期望tsconfig发出.js
文件,然后Webpack可以通过加载器对其进行处理 - 由于#1,我不能仅在tsconfig中将emission设置为false,因为webpack依赖于处理输出的js文件,以便最终可以从它们创建捆绑包.
- 由于我不希望tsconfig生成的中间js文件使我的
src
文件夹混乱,因此将tsconfig输出目录设置为build
- webpack的输出目录是
dist
,所以我将仅以生产版本结束
- Since I was using
ts-loader
in webpack, it expects tsconfig to emit.js
files that webpack can then process via the loader - Due to #1, I couldn't just set the emit to false in tsconfig because webpack relies on processing the outputted js files so that it can create a bundle off them ultimately
- Since I don't want those intermediate js files that are generated by tsconfig cluttering my
src
folder, I set my tsconfig output directory to bebuild
- webpack's output directory is
dist
so I will end up with only the production build
这样做,中间的TS js文件被输出到 build
,由webpack拾取,处理成包,然后将包输出到 dist
.
By doing this, the intermediate TS js files are outputted to build
, picked up by webpack, processed into a bundle, and bundle is outputted to dist
.
./ tsconfig.json
"compilerOptions": {
"outDir": "./build",
}
./ webpack.config.js
entry: './src/client/index.tsx',
output: {
filename: 'scripts/app.[hash].bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
{
test: /\.(tsx|ts)?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
这使一切保持清洁.
这篇关于Webpack构建或TypeScript正在我的SRC中创建JS文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!