YDJ-FE / ts-react-vite_or_webpack

a starter-template with typescript, react, mobx and vite/webpack...
https://starter.jackple.com/
MIT License
362 stars 116 forks source link

我仿照了这边配置来配置,但是出错了,可以帮我看看嘛? #4

Closed LiJoah closed 6 years ago

LiJoah commented 6 years ago

这个是全部的配置: const path = require("path"); const webpack = require("webpack"); // const ExtractTextPlugin = require("extract-text-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = { mode: process.env.NODE_ENV === "production" ? "production" : "development", entry: { bundle: path.resolve(__dirname, "src/main.tsx") },

output: { path: path.resolve(dirname, "dist/"), publicPath: path.resolve(dirname, "dist"), filename: process.env.NODE_ENV === "production" ? "[name].[chunkhash:8].js" : "[name].js", chunkFilename: process.env.NODE_ENV === "production" ? "[name].[chunkhash:8].chunk.js" : "[name].js", },

devtool: "source-map",

resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"], extensions: [".ts", ".tsx", ".js"] },

module: { rules: [ { test: /.(ts(x?)|js(x?))$/, use: [ { loader: "awesome-typescript-loader", options: { transpileOnly: true, useCache: true, cacheDirectory: path.resolve(__dirname, ".cache-loader"), useBabel: true, babelOptions: { babelrc: false, plugins: ["react-hot-loader/babel"] } } } ], exclude: /node_modules/ }, // { // enforce: "pre", // test: /.js$/, // loader: "babel-loader", // exclude: /node_modules/ // }, { test: /.less$/, use: ["style-loader", "css-loader", "postcss-loader", "less-loader"] }, { test: /.(jpeg|png|jpg|gif|svg)$/, use: [ { loader: "url-loader", options: { limit: 10000 } } ] } ] },

plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, "index.html"), title: "blog", inject: false, minify: { removeComments: true, collapseWhitespace: true }, chunksSortMode: "dependency" }), // new ExtractTextPlugin({ filename: "[name].css", allChunks: true }), // new webpack.HotModuleReplacementPlugin(), // new webpack.NamedModulesPlugin() // 执行热替换时打印模块名字 ],

watch: true, target: "web" // devServer: { // contentBase: path.join(__dirname, "dist"), // compress: true, // port: 9000, // host: "0.0.0.0", // hot: true // } };

错误信息是:

ERROR in ./src/components/index/index.tsx Module build failed (from ./node_modules/awesome-typescript-loader/dist/entry.js): SyntaxError: /home/joah/workspace/my-blog/src/components/index/index.tsx: Unexpected token (19:16) 17 | } 18 | Index.prototype.render = function () {

19 | return (

| ^ 20 |
index
21 |
); 22 | }; at Parser.pp$5.raise (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:4454:13) at Parser.pp.unexpected (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:1761:8) at Parser.pp$3.parseExprAtom (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3750:12) at Parser.pp$3.parseExprSubscripts (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3494:19) at Parser.pp$3.parseMaybeUnary (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3474:19) at Parser.pp$3.parseExprOps (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3404:19) at Parser.pp$3.parseMaybeConditional (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3381:19) at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3344:19) at Parser.pp$3.parseParenAndDistinguishExpression (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3828:26) at Parser.pp$3.parseExprAtom (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3709:19) at Parser.pp$3.parseExprSubscripts (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3494:19) at Parser.pp$3.parseMaybeUnary (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3474:19) at Parser.pp$3.parseExprOps (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3404:19) at Parser.pp$3.parseMaybeConditional (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3381:19) at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3344:19) at Parser.pp$3.parseExpression (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3306:19) at Parser.pp$1.parseReturnStatement (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2078:26) at Parser.pp$1.parseStatement (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:1848:19) at Parser.pp$1.parseBlockBody (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2268:21) at Parser.pp$1.parseBlock (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2247:8) at Parser.pp$3.parseFunctionBody (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:4235:22) at Parser.pp$1.parseFunction (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:2386:8) at Parser.pp$3.parseFunctionExpression (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3760:17) at Parser.pp$3.parseExprAtom (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3722:19) at Parser.pp$3.parseExprSubscripts (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3494:19) at Parser.pp$3.parseMaybeUnary (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3474:19) at Parser.pp$3.parseExprOps (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3404:19) at Parser.pp$3.parseMaybeConditional (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3381:19) at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3344:19) at Parser.pp$3.parseMaybeAssign (/home/joah/workspace/my-blog/node_modules/babylon/lib/index.js:3367:23) @ ./src/main.tsx 9:0-45 10:32-37 Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html 4 modules

Index.prototype.render = function () {

19 | return (

| ^ 20 |
index
21 |
); 22 | };

《感觉像是没有识别 jsx 的语法 》

jackple commented 6 years ago

@LiJoah 你这仿照仿的区别有点大啊,你试试加Babel-polyfill,或者把你项目地址发出来看看?

:octocat: From gitme iOS

LiJoah commented 6 years ago

@jackple 是的, 我只是抽取了我能理解的部分, 有一些不是特别的懂,可能需要一点点的看, 看懂了在添加到我的项目中,git@git.coding.net:liyao_sun/blog.git 这个是地址,在coding上面;

jackple commented 6 years ago

以实际运行项目考量

:octocat: From gitme iOS