React with Typescript（型チェック専用）、すべてのコード変換用のBabel、テスト用のJest、コードチェック用のESLint、その他のツールを構成しようとしています。以下のリポジトリリンクをすべてのファイルで確認してください。
Kent C. Doddsに従い、チュートリアルに従ってTypescriptを使用してwebpackを追加しました：https：//blog.wax-o.com/2018/05/webpack-loaders-babel-sourcemaps-react-hot-module-reload-typescript- modules-code-splitting-and-lazy-loading-full-tutorial-to-transpile-and-bundle-your-code /
ある時点でビルドがTypeScriptファイルに対して機能したため、これらすべてのツールを連携させることは可能のようですが、開発サーバーは機能せず、現在はどちらも機能しません。
私はこれで完全な初心者なので、より経験豊富な目で構成を見ていただければ幸いです。
エラーメッセージ：
PS D:\server\www\apache24_29\htdocs\react-boilerplate> npm run build
> [email protected] build D:\server\www\apache24_29\htdocs\react-boilerplate
> webpack --env.NODE_ENV=production
Start build for NODE_ENV: production
clean-webpack-plugin: D:\server\www\apache24_29\htdocs\react-boilerplate\webpackConfig\dist has been removed.
Hash: a14d15aa8f5505a1657a
Version: webpack 4.28.3
Time: 200ms
Built at: 2019-01-01 12:00:02
2 assets
Entrypoint main = index.js sourcemaps/main.js.map
[0] ./src/index.tsx 262 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.tsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.| import { HelloComponent } from "./hello";
|
> ReactDOM.render(<HelloComponent />, document.getElementById("root"));
|
Webpack Bundle Analyzer saved report to D:\server\www\apache24_29\htdocs\react-boilerplate\dist\report.html
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --env.NODE_ENV=production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\...\AppData\Roaming\npm-cache\_logs\2019-01-01T11_00_03_174Z-debug.log
現在のバージョンでリポジトリを作成しました。それはすべて進行中の作業です：https：//github.com/ethernal/react-boilerplate
ここにも設定を投稿しています。
package.json
{
"name" : "react-boilerplate",
"version" : "1.0.0",
"description": "React Boilerplate with Typescript, Babel, Jest, EsLint, Prettier, Styled Components, React Testig Library, Webpack, Webpack Dev Server",
"main" : "index.tsx",
"scripts" : {
"format" : "prettier \"**/*.(js|ts|tsx|jsx)\" --write",
"lint" : "eslint . --ext \".js,.ts,.tsx\"",
"typecheck" : "tsc",
"test" : "jest --watch",
"cover" : "jest --coverage",
"start" : "babel-node --extensions '.ts,.tsx' index.ts",
"build" : "webpack --env.NODE_ENV=production",
"server-no-reaload": "webpack-dev-server --env.NODE_ENV=development",
"server" : "nodemon --watch webpack.config.ts -x webpack-dev-server -- --env.NODE_ENV=development"
},
"author" : "",
"license" : "ISC",
"dependencies": {
"@reach/router" : "^1.2.1",
"babel-plugin-styled-components": "^1.10.0",
"react" : "^16.7.0",
"react-dom" : "^16.7.0",
"styled-components" : "^4.1.3"
},
"devDependencies": {
"@babel/cli" : "^7.2.3",
"@babel/core" : "^7.2.2",
"@babel/parser" : "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import" : "^7.2.0",
"@babel/preset-env" : "^7.2.3",
"@babel/preset-react" : "^7.0.0",
"@babel/preset-typescript" : "^7.1.0",
"@types/jest" : "^23.3.10",
"@types/node" : "^10.12.18",
"@types/react" : "^16.7.17",
"@types/react-dom" : "^16.0.11",
"@types/webpack" : "^4.4.22",
"babel-loader" : "^8.0.4",
"clean-webpack-plugin" : "^1.0.0",
"copy-webpack-plugin" : "^4.6.0",
"eslint" : "^5.10.0",
"eslint-plugin-typescript" : "^0.14.0",
"html-minifier" : "^3.5.21",
"jest" : "^23.6.0",
"jest-runner-eslint" : "^0.7.1",
"jest-runner-tsc" : "^1.3.2",
"nodemon" : "^1.18.9",
"pluggable-babel-eslint" : "^0.3.0",
"prettier" : "^1.15.3",
"react-hot-loader" : "^4.6.3",
"react-testing-library" : "^5.4.2",
"source-map-loader" : "^0.2.4",
"ts-loader" : "^5.3.2",
"ts-node" : "^7.0.1",
"typescript" : "^3.2.2",
"typescript-babel-jest" : "^1.0.5",
"typescript-eslint-parser" : "^21.0.2",
"uglifyjs-webpack-plugin" : "^2.1.1",
"webpack" : "^4.28.3",
"webpack-bundle-analyzer" : "^3.0.3",
"webpack-cli" : "^3.1.2",
"webpack-dev-server" : "^3.1.14"
},
"jest": {
"setupFiles": [
"./jest.config.js"
],
"moduleDirectories": [
"./node_modules",
"./src"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "typescript-babel-jest"
}
},
"resolutions": {
"babel-core": "^7.0.0-bridge.0"
}
}
webpackの主な構成：
const path = require('path');
const productionConfig = require('./webpackConfig/production');
const developmentConfig = require('./webpackConfig/development');
module.exports = env => {
if (env.NODE_ENV === 'production')
return productionConfig(env, path.resolve(__dirname));
if (env.NODE_ENV === 'development')
return developmentConfig(env, path.resolve(__dirname));
};
webpack開発構成：
const webpack = require("webpack");
function buildDevelopementConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
devtool: "cheap-module-eval-source-map",
output : {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "development",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
devServer: {
host : "0.0.0.0",
contentBase : dirname + "/src",
hotOnly : true,
overlay : true,
publicPath : "/",
watchContentBase: false
},
module: {
rules: [
{
test : /\.(tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["> 0.5%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}
}
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
}
module.exports = buildDevelopementConfig;
Webpackの実稼働構成：
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLMinifier = require("html-minifier");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
function buildProductionConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
output: {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "production",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
module: {
rules: [
{
test : /\.(js|jsx|ts|tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["cover 99%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
]
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new UglifyJsPlugin({
parallel : true,
sourceMap : true,
cache : true,
include : dirname + "/src",
uglifyOptions: {
compress: true,
toplevel: true,
safari10: true,
output : {
comments: false
}
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.SourceMapDevToolPlugin({
filename : "sourcemaps/[name].js.map",
lineToLine: true
}),
new BundleAnalyzerPlugin({ analyzerMode: "static" }),
new CopyWebpackPlugin(
[
{
from: dirname + "/src/index.html",
to : dirname + "/dist",
transform(htmlAsBuffer) {
return Buffer.from(
HTMLMinifier.minify(
htmlAsBuffer.toString("utf8"),
{
collapseWhitespace : true,
collapseBooleanAttributes : true,
collapseInlineTagWhitespace: true
}
)
);
}
}
],
{}
)
],
performance: {
hints: "warning"
}
};
}
module.exports = buildProductionConfig;
リポジトリへのリンクを投稿しなかった（または削除された）ようですが、今日はすべての問題点をクリアすることができました。実用的な例を見たい場合は、https：//github.com/ethernal/react-boilerplateにあります。
私の最初の問題は、TS / JSファイルを2回トランスパイルしようとしたことでした。
PS。興味のある方は、設定とその改善方法についてコメントをいただければ幸いです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加