我正在尝试使用cookiecutter-flask
模板编写基于Flask的Web应用程序。我想使用React的某些元素(特别是https://mdbootstrap.com/docs/react/tables/search/)。
但是,导入react
时遇到问题。
这是我到目前为止所做的:
1.安装了Docker,npm和好友。
2.下载了烧瓶曲奇切割器仓库(https://github.com/cookiecutter-flask/cookiecutter-flask)。
3.已安装npm install react react-bootstrap react-dom babel-cli@6 babel-preset-react-app@3 mdbreact
。
4.将表的代码放在上面链接中的单独文件中,并尝试将require(./queue.jsx
)放入主
但是,当我使用docker-compose up flask-dev
运行该应用程序时,我得到:
docker-compose up flask-dev
Recreating esm_viz_webapp_flask-dev_1 ... done
Attaching to esm_viz_webapp_flask-dev_1
flask-dev_1 | Loading .env environment variables…
flask-dev_1 |
flask-dev_1 | > esm_viz_webapp@1.0.0 start /app
flask-dev_1 | > concurrently -n "WEBPACK,FLASK" -c "bgBlue.bold,bgMagenta.bold" "npm run webpack-watch" "npm run flask-server"
flask-dev_1 |
flask-dev_1 | [FLASK]
flask-dev_1 | [FLASK] > esm_viz_webapp@1.0.0 flask-server /app
flask-dev_1 | [FLASK] > pipenv run flask run --host=0.0.0.0
flask-dev_1 | [FLASK]
flask-dev_1 | [WEBPACK]
flask-dev_1 | [WEBPACK] > esm_viz_webapp@1.0.0 webpack-watch /app
flask-dev_1 | [WEBPACK] > NODE_ENV=debug webpack --mode development --watch
flask-dev_1 | [WEBPACK]
flask-dev_1 | [FLASK] Loading .env environment variables...
flask-dev_1 | [WEBPACK]
flask-dev_1 | [WEBPACK] webpack is watching the files...
flask-dev_1 | [WEBPACK]
flask-dev_1 | [FLASK] * Serving Flask app "autoapp.py" (lazy loading)
flask-dev_1 | [FLASK] * Environment: development
flask-dev_1 | [FLASK] * Debug mode: on
flask-dev_1 | [FLASK] * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
flask-dev_1 | [FLASK] * Restarting with stat
flask-dev_1 | [FLASK] * Debugger is active!
flask-dev_1 | [FLASK] * Debugger PIN: 310-195-478
flask-dev_1 | [WEBPACK] Hash: 2200bcb154f80c08f6f0
flask-dev_1 | [WEBPACK] Version: webpack 4.41.5
flask-dev_1 | [WEBPACK] Time: 2168ms
flask-dev_1 | [WEBPACK] Built at: 01/08/2020 10:19:23 AM
flask-dev_1 | [WEBPACK] Asset Size Chunks Chunk Names
flask-dev_1 | [WEBPACK] _/node_modules/font-awesome/fonts/fontawesome-webfont.eot 162 KiB [emitted]
flask-dev_1 | [WEBPACK] _/node_modules/font-awesome/fonts/fontawesome-webfont.svg 434 KiB [emitted]
flask-dev_1 | [WEBPACK] _/node_modules/font-awesome/fonts/fontawesome-webfont.ttf 162 KiB [emitted]
flask-dev_1 | [WEBPACK] af7ae505a9eed503f8b8e6982036873e.woff2 75.4 KiB [emitted]
flask-dev_1 | [WEBPACK] fee66e712a8a08eef5805a46892932ad.woff 95.7 KiB [emitted]
flask-dev_1 | [WEBPACK] img/favicon.ico 58.2 KiB [emitted]
flask-dev_1 | [WEBPACK] main_css.bundle.css 230 KiB main_css [emitted] main_css
flask-dev_1 | [WEBPACK] main_css.bundle.js 8.25 KiB main_css [emitted] main_css
flask-dev_1 | [WEBPACK] main_js.bundle.js 1.58 MiB main_js [emitted] main_js
flask-dev_1 | [WEBPACK] Entrypoint main_js = main_js.bundle.js
flask-dev_1 | [WEBPACK] Entrypoint main_css = main_css.bundle.css main_css.bundle.js
flask-dev_1 | [WEBPACK] [0] multi ./node_modules/font-awesome/css/font-awesome.css ./node_modules/bootstrap/dist/css/bootstrap.css ./assets/css/style.css 52 bytes {main_css} [built]
flask-dev_1 | [WEBPACK] [./assets/css/style.css] 325 bytes {main_css} [built]
flask-dev_1 | [WEBPACK] [./assets/img sync recursive .*] ./assets/img sync .* 178 bytes {main_js} [built]
flask-dev_1 | [WEBPACK] [./assets/img/favicon.ico] 59 bytes {main_js} [optional] [built]
flask-dev_1 | [WEBPACK] [./assets/js/main.js] 625 bytes {main_js} [built]
flask-dev_1 | [WEBPACK] [./assets/js/plugins.js] 85 bytes {main_js} [built]
flask-dev_1 | [WEBPACK] [./assets/js/queue.jsx] 303 bytes {main_js} [built] [failed] [1 error]
flask-dev_1 | [WEBPACK] [./assets/js/script.js] 36 bytes {main_js} [built]
flask-dev_1 | [WEBPACK] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main_js} [built]
flask-dev_1 | [WEBPACK] + 12 hidden modules
flask-dev_1 | [WEBPACK]
flask-dev_1 | [WEBPACK] ERROR in ./assets/js/main.js
flask-dev_1 | [WEBPACK] Module not found: Error: Can't resolve 'react' in '/app/assets/js'
flask-dev_1 | [WEBPACK] @ ./assets/js/main.js 19:0-16
flask-dev_1 | [WEBPACK]
flask-dev_1 | [WEBPACK] ERROR in ./assets/js/queue.jsx 505:4
flask-dev_1 | [WEBPACK] Module parse failed: Unexpected token (505:4)
flask-dev_1 | [WEBPACK] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
flask-dev_1 | [WEBPACK] |
flask-dev_1 | [WEBPACK] | return (
flask-dev_1 | [WEBPACK] > <MDBDataTable
flask-dev_1 | [WEBPACK] | striped
flask-dev_1 | [WEBPACK] | bordered
flask-dev_1 | [WEBPACK] @ ./assets/js/main.js 31:0-22
flask-dev_1 | [WEBPACK] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!assets/css/style.css:
flask-dev_1 | [WEBPACK] Entrypoint mini-css-extract-plugin = *
flask-dev_1 | [WEBPACK] [./node_modules/css-loader/dist/cjs.js!./assets/css/style.css] 1.46 KiB {mini-css-extract-plugin} [built]
flask-dev_1 | [WEBPACK] + 1 hidden module
flask-dev_1 | [WEBPACK] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/bootstrap/dist/css/bootstrap.css:
flask-dev_1 | [WEBPACK] Entrypoint mini-css-extract-plugin = *
flask-dev_1 | [WEBPACK] 2 modules
flask-dev_1 | [WEBPACK] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/font-awesome/css/font-awesome.css:
flask-dev_1 | [WEBPACK] Entrypoint mini-css-extract-plugin = *
flask-dev_1 | [WEBPACK] 9 modules
我猜错误在这里:
flask-dev_1 | [WEBPACK] ERROR in ./assets/js/main.js
flask-dev_1 | [WEBPACK] Module not found: Error: Can't resolve 'react' in '/app/assets/js'
flask-dev_1 | [WEBPACK] @ ./assets/js/main.js 19:0-16
flask-dev_1 | [WEBPACK]
flask-dev_1 | [WEBPACK] ERROR in ./assets/js/queue.jsx 505:4
flask-dev_1 | [WEBPACK] Module parse failed: Unexpected token (505:4)
我需要在Web Pack配置中执行一些操作才能使其正常工作吗?
这是webpack.config.js
const path = require('path');
const webpack = require('webpack');
/*
* Webpack Plugins
*/
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ProductionPlugins = [
// production webpack plugins go here
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
]
const debug = (process.env.NODE_ENV !== 'production');
const rootAssetPath = path.join(__dirname, 'assets');
module.exports = {
// configuration
context: __dirname,
entry: {
main_js: './assets/js/main',
main_css: [
path.join(__dirname, 'node_modules', 'font-awesome', 'css', 'font-awesome.css'),
path.join(__dirname, 'node_modules', 'bootstrap', 'dist', 'css', 'bootstrap.css'),
path.join(__dirname, 'assets', 'css', 'style.css'),
],
},
mode: debug,
output: {
chunkFilename: "[id].js",
filename: "[name].bundle.js",
path: path.join(__dirname, "esm_viz_webapp", "static", "build"),
publicPath: "/static/build/"
},
resolve: {
extensions: [".js", ".jsx", ".css"]
},
devtool: debug ? "eval-source-map" : false,
plugins: [
new MiniCssExtractPlugin({ filename: "[name].bundle.css" }),
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
].concat(debug ? [] : ProductionPlugins),
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: debug,
},
},
'css-loader!less-loader',
],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: debug,
},
},
'css-loader',
],
},
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
{
test: /\.(ttf|eot|svg|png|jpe?g|gif|ico)(\?.*)?$/i,
loader: `file-loader?context=${rootAssetPath}&name=[path][name].[ext]`
},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ["@babel/preset-env"], cacheDirectory: true } },
],
}
};
这是一个简化的文件树:
# Files:
├── Dockerfile
├── LICENSE
├── Pipfile
├── Pipfile.lock
├── README.md
├── assets
├── autoapp.py
├── dev.db
├── docker-compose.yml
├── docs
├── esm_viz_webapp
├── migrations
├── node_modules
├── package-lock.json
├── package.json
├── setup.cfg
├── shell_scripts
├── supervisord.conf
├── supervisord_programs
├── tests
├── tree.tmp
└── webpack.config.js
# Directories
.
├── assets
│ ├── css
│ ├── img
│ └── js
├── dev.db
├── docs
│ ├── _build
│ ├── _static
│ └── _templates
├── esm_viz_webapp
│ ├── public
│ ├── static
│ ├── templates
│ ├── user
│ └── webpack
├── migrations
│ └── versions
├── node_modules
.
├── assets
│ ├── css
│ ├── img
│ └── js
├── dev.db
├── docs
│ ├── _build
│ ├── _static
│ └── _templates
├── esm_viz_webapp
│ ├── __pycache__
│ ├── public
│ ├── static
│ │ └── build
│ │ ├── _
│ │ └── img
│ ├── templates
│ │ ├── public
│ │ └── users
│ ├── user
│ └── webpack
├── migrations
│ └── versions
├── node_modules
│ ├── ...
| ├── ...
| ├── ...
├── shell_scripts
├── supervisord_programs
└── tests
非常感谢您的帮助,如果有帮助,我们很乐意发布任何其他日志或文件。
谢谢! 保罗