wx-chevalier / web-examples

Lucid & Futuristic Production Boilerplates For Frontend(Web) Apps, React/RN/Vue, with TypeScript(Optional), Webpack 4/Parcel, MobX/Redux :dizzy: 多技术栈前端项目模板

Demo · 更多项目 · 参考资料

Introduction

Here's a blank template to get started: To avoid retyping too much info. Do a search and replace with your text editor for the following: wx-chevalier, repo, twitter_handle, email

Nav | 导航

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

npm install npm@latest -g

Installation

1. Clone the repo

git clone https://github.com/wx-chevalier/repo.git

2. Install NPM packages

npm install

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

About

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

• Awesome-Lists: 📚 Guide to Galaxy, curated, worthy and up-to-date links/reading list for ITCS-Coding/Algorithm/SoftwareArchitecture/AI. 💫 ITCS-编程/算法/软件架构/人工智能等领域的文章/书籍/资料/项目链接精选。

• Awesome-CS-Books: 📚 Awesome CS Books/Series(.pdf by git lfs) Warehouse for Geeks, ProgrammingLanguage, SoftwareEngineering, Web, AI, ServerSideApplication, Infrastructure, FE etc. 💫 优秀计算机科学与技术领域相关的书籍归档。

Copyright & More | 延伸阅读

笔者所有文章遵循知识共享 署名 - 非商业性使用 - 禁止演绎 4.0 国际许可协议，欢迎转载，尊重版权。您还可以前往 NGTE Books 主页浏览包含知识体系、编程语言、软件工程、模式与架构、Web 与大前端、服务端开发实践与工程架构、分布式基础架构、人工智能与深度学习、产品运营与创业等多类目的书籍列表：

web-examples's Issues

react-ts-webpack 如何启动

请问 react-ts-webpack 这个项目如何在本地启动，我能单独启动 host 或者子 app，但是不知道怎么把整套微前端系统启动起来

SASS Module

Please add typings-for-css-modules-loader plugin to /react/webpack-ts.To support the flow example:
import style from '/**/.sass'.
otherwise it doesn't work to use css module when build the production.
or i need to write the *.d.ts manually.
Thanks.

Remove react related content in vue's README.md

Hello, thanks to offer such nice boilerplate for Vue(also, react)! But there's seem to be some react related content in vue/README.md, I'm not think it's useful for a Vue boilerplate.

npm run build 出错

os ： MacBook Pro (Retina, Mid 2012)

ERROR in OfflinePlugin: Plugin's runtime wasn't added to one of your bundle entries. See this https://goo.gl/YwewYp for details.

以下是debuglog
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 silly lifecycle [email protected]prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]build: [email protected]
8 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/doublewood/Desktop/myProject/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle [email protected]build: CWD: /Users/doublewood/Desktop/myProject
11 silly lifecycle [email protected]build: Args: [ '-c', 'npm run clean && better-npm-run build' ]
12 silly lifecycle [email protected]build: Returned: code: 2 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: npm run clean && better-npm-run build
14 verbose stack Exit status 2
14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:283:16)
14 verbose stack at emitTwo (events.js:125:13)
14 verbose stack at EventEmitter.emit (events.js:213:7)
14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:125:13)
14 verbose stack at ChildProcess.emit (events.js:213:7)
14 verbose stack at maybeClose (internal/child_process.js:897:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/doublewood/Desktop/myProject
17 verbose Darwin 16.6.0
18 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
19 verbose node v8.1.2
20 verbose npm v5.0.4
21 error code ELIFECYCLE
22 error errno 2
23 error [email protected] build: npm run clean && better-npm-run build
23 error Exit status 2
24 error Failed at the [email protected] build script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 2, true ]

npm start 构建失败

babel相关的包我都装好了呀，为嘛还会去请求获取babel的？

Error in multi main │┌─Operation──────────────────────────┐
│ Module not found: Error: Can't resolve 'babel' in '/Learn/react/sharefly-reactdemo/Webpack2-React-Redux-Boile ││ │
│ rplate-master' ││ idle (3s) │
│ BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. │└────────────────────────────────────┘
│ You need to specify 'babel-loader' instead of 'babel'. │┌─Progress───────────────────────────┐
│ resolve 'babel' in '/Learn/react/sharefly-reactdemo/Webpack2-React-Redux-Boilerplate-master'

react/webpack 打包失败

log：
0 info it worked if it ends with ok
1 verbose cli [ '/Users/tigerye/.nvm/versions/node/v8.10.0/bin/node',
1 verbose cli '/Users/tigerye/.nvm/versions/node/v8.10.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle @wx/[email protected]prebuild: @wx/[email protected]
6 info lifecycle @wx/[email protected]build: @wx/[email protected]
7 verbose lifecycle @wx/[email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle @wx/[email protected]build: PATH: /Users/tigerye/.nvm/versions/node/v8.10.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/tigerye/Documents/WorkSpace/learning/react/react/webpack/node_modules/.bin:/Users/tigerye/anaconda/bin:/usr/local/opt/coreutils/libexec/gnubin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/tigerye/anaconda/bin:/Users/tigerye/.nvm/versions/node/v8.10.0/bin:/usr/local/opt/coreutils/libexec/gnubin:/usr/local/mysql/bin:/usr/local/mysql/bin
9 verbose lifecycle @wx/[email protected]build: CWD: /Users/tigerye/Documents/WorkSpace/learning/react/react/webpack
10 silly lifecycle @wx/[email protected]build: Args: [ '-c',
10 silly lifecycle 'npm run clean && BABEL_ENV=production webpack --config ./dev-config/webpack.config.prod.js --mode production' ]
11 silly lifecycle @wx/[email protected]build: Returned: code: 2 signal: null
12 info lifecycle @wx/[email protected]build: Failed to exec build script
13 verbose stack Error: @wx/[email protected] build: npm run clean && BABEL_ENV=production webpack --config ./dev-config/webpack.config.prod.js --mode production
13 verbose stack Exit status 2
13 verbose stack at EventEmitter. (/Users/tigerye/.nvm/versions/node/v8.10.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess. (/Users/tigerye/.nvm/versions/node/v8.10.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid @wx/[email protected]
15 verbose cwd /Users/tigerye/Documents/WorkSpace/learning/react/react/webpack
16 verbose Darwin 18.7.0
17 verbose argv "/Users/tigerye/.nvm/versions/node/v8.10.0/bin/node" "/Users/tigerye/.nvm/versions/node/v8.10.0/bin/npm" "run" "build"
18 verbose node v8.10.0
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 2
22 error @wx/[email protected] build: npm run clean && BABEL_ENV=production webpack --config ./dev-config/webpack.config.prod.js --mode production
22 error Exit status 2
23 error Failed at the @wx/[email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

windows平台的install.bat都是错

疑似直接把sh换了个后缀~
首先换行符得换成windows的，其次注释语法是错的，导致没有一条命令可以运行。最后第一行那个在windows上不只是不起作用，还会报错。
还有个问题可能也会影响其他平台。最开始用npm安装yarn，官方已经废弃的，官方推荐直接用安装包管理器下载安装，或者在windows平台上直接下个msi安装包安装。我的情况是我已经用msi安装了2.3版本的，用了这个install，再次用npm安装了2.2版本的。我也不知道会不会有什么副作用，所以手动用npm卸载了npm内部的yarn

better-npm-run报错

better-npm-run 不是内部或者外部命令，也不是可运行程序
在install后出现的报错

跑npm start出错

Failed to compile.
Error in ./src/client.js
Module build failed: Error: Couldn't find preset "flow" relative to directory "/Users/doublewood/Desktop/myProject/dev-config/tool"
at Array.map (native)
dev-config/tool下面的 .babelrc
"presets": [
[
"env",
{
"modules": false
}
],
"stage-0",
"flow"
],

npm install better-npm-run -g 之后报错

npm install better-npm-run -g 后

关于react-router V4与同构

react-router V4 官方文档上说明 不支持代码分割+服务端渲染。并且祝福要一起使用的人。
大大，有什么好的解决方案吗？

window平台下start报错

nmp logs:
0 info it worked if it ends with ok
1 verbose cli [ 'D:\Program Files\nodejs\node.exe',
1 verbose cli 'D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start',
1 verbose cli '--scripts-prepend-node-path=auto' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 silly lifecycle [email protected]prestart: no script for prestart, continuing
7 info lifecycle [email protected]start: [email protected]
8 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]start: PATH: D:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\www\GitHub\create-webpack-app\react\node_modules.bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Python27;C:\Python27\Scripts;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Microsoft\Web Platform Installer;C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0;C:\Program Files (x86)\Windows Kits\8.0\Windows Performance Toolkit;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\Python27;C:\WINDOWS\system32\config\systemprofile.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit;C:\Program Files\Git\cmd;D:\ProgramData\adtbundlewindows\sdk\tools;D:\ProgramData\adtbundlewindows\sdk\platform-tools;C:\Python27;C:\Program Files (x86)\Java\jdk1.8.0_73\bin;D:\Program Files\TortoiseSVN\bin;D:\Program Files\phpfind\phpb;C:\ProgramData\ComposerSetup\bin;D:\Program Files\apache-maven-3.3.9\bin;D:\Program Files (x86)\HashiCorp\Vagrant\bin;D:\Program Files\nodejs;C:\Ruby23-x64\bin;C:\Users\YTYT\AppData\Roaming\Composer\vendor\bin;C:\Users\YTYT\AppData\Roaming\npm
10 verbose lifecycle [email protected]start: CWD: D:\www\GitHub\create-webpack-app\react
11 silly lifecycle [email protected]start: Args: [ '/d /s /c',
11 silly lifecycle 'better-npm-run start:dll && better-npm-run start:dev' ]
12 silly lifecycle [email protected]start: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: better-npm-run start:dll && better-npm-run start:dev
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (D:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (D:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:891:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\www\GitHub\create-webpack-app\react
17 error Windows_NT 10.0.10586
18 error argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start" "--scripts-prepend-node-path=auto"
19 error node v6.11.1
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error [email protected] start: better-npm-run start:dll && better-npm-run start:dev
22 error Exit status 1
23 error Failed at the [email protected] start script 'better-npm-run start:dll && better-npm-run start:dev'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error better-npm-run start:dll && better-npm-run start:dev
23 error You can get information on how to open an issue for this project with:
23 error npm bugs react-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls react-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

cmd下
to be executed: "./node_modules/.bin/webpack --config ./dev-config/webpack.dll.config.js"
'.' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start" "--scripts-prepend-node-path=auto"

请教启动后status为Failed

您好，我使用的vue的webpack模板，启动以后控制台的status为Failed，浏览器打开以后空白，报错如下：
GET http://localhost:3000/main.bundle.js 404 (Not Found)
localhost/:1 Refused to execute script from 'http://localhost:3000/main.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
favicon.ico:1 GET http://localhost:3000/favicon.ico 404 (Not Found)

我是拿您的模板来学习vue和webpack的，请问这可能是什么问题呢？谢谢！

我安装systemjs之后require报错（找不到模块）

ERROR in ./~/systemjs/dist/system.src.js
Module not found: Error: Can't resolve 'fs' in '/Applications/XAMPP/xamppfiles/htdocs/woeks/20161115/SmartAnalysis/node_modules/systemjs/dist'
 @ ./~/systemjs/dist/system.src.js 1492:13-26
 @ ./js/src/Unique_main.jsx
 @ multi webpack-dev-server/client?http://127.0.0.1:3001 webpack/hot/dev-server ./js/src/Unique_main.jsx
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  567 kB       0
webpack: bundle is now VALID.

simple/helloworld/lazy/loaded_jquery.js中两次使用export default分别导出LoadedJQuery和LazilyLoadFactory，这种用法在Node 6.9不合法吧

请教下entry和output怎么对应的

如题，我查阅各种资料，都说output的js文件名和entry是一一对应的。但是这个脚手架里的配置中，开发模式下，entry是个数组，output用的是[name].bundle.js，但最终文件却是main.bundile.js和vendor.bundle.js，这是怎么回事？到底是哪里配置出来的？
我想将这个项目https://github.com/react-cosmos整合进工程中，但疑似因为index.html和bundle.js的原因杯具了

Cannot find module 'prepack'

复制步骤是：

• 平台：macOS Sierra
• 下载源码
• cd ./vue
• yarn install
• npm start
• 出现： Cannot find module 'prepack'

请问：这个怎么解决？

autoprefixer 貌似没有效果

autoprefixer 貌似没有效果

机器 mac

几点问题

• flowconfig 里的 libs 下包含 node_modules 不合适，导致 flow 运行会很慢
• 说引入 flow，其实没有实际应用

webpack-ts项目，script配置有误

其中："dev": "parallelshell \"npm run mock\" \"npm run dev\""