- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个React项目,所有扩展名都是.js,没有一个使用.jsx。我下载了一个新的库react-pdf-js-infinite,它使用.jsx。在我的webpack中,加载程序是在所有node_modules上运行的异常。我如何设置它以便它可以在我的node_module中的.jsx文件上运行。当我尝试使用webpack运行我的生产版本时,我经常遇到错误。说这个文件可能需要装载程序,并且是在构建过程中遇到组件类内的静态propTypes的ecma标准时。任何帮助,将不胜感激。
class PDF extends Component {
static propTypes = {
x: propType.String
}
}
最佳答案
这就是您的webpack配置的外观。包含所有用于
带有React redux Sass和其他实用程序的ES6。
/* eslint-env node */
const autoprefixer = require('autoprefixer');
const CompressionPlugin = require('compression-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SystemBellPlugin = require('system-bell-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const highlightjsLanguages=['javascript', 'python', 'bash', 'java', 'cpp'];
const env=process.env.NODE_ENV;
const isProd = (env.toLowerCase().trim() === 'production')? true: false;
const vendor = [
'react',
'react-dom',
'react-router-dom',
'prop-types',
'redux',
'react-redux',
'redux-thunk',
'axios',
'babel-polyfill',
'browser-detect'
];
// Configuration object
const config = {
devtool: isProd ? 'source-map' : 'source-map',
entry: ['babel-polyfill','./src/index'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: isProd ? '[name].[chunkhash].js' : 'bundle.js',
publicPath: '/',
},
resolve: {
extensions: ['*', '.js', '.jsx', '.json'],
},
target: 'web',
module: {
rules: [
{
enforce: 'pre',
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(css|scss|sass)$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true,
},
}, {
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins() {
return [autoprefixer('last 2 versions', 'ie 10')];
},
},
}, {
loader: 'sass-loader',
options: { sourceMap: true },
}],
}),
},
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?name=assests/fonts/[name].[ext]' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?mimetype=application/font-woff&name=assests/fonts/[name].[ext]' },
{ test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream&name=assests/fonts/[name].[ext]' },
{ test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml&name=assests/fonts/[name].[ext]' },
{ test: /\.(jpe?g|png|gif|ico)$/i, loader: 'file-loader?name=assests/images/[name].[ext]' },
],
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
port: 8000,
historyApiFallback: true,
hot: true
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
disable: !isProd,
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new SystemBellPlugin(),
new CopyWebpackPlugin( [{from:'src/web.config',to:'./'}]),
new webpack.ContextReplacementPlugin(
/highlight\.js\/lib\/languages$/,
new RegExp(`^./(${highlightjsLanguages.join('|')})$`)
)
],
};
if (isProd) {
Array.prototype.push.apply(config.plugins, [
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true
},
output: {
comments: false,
},
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
minChunks(module) {
const { context } = module;
if (typeof context !== 'string') {
return false;
}
return context.indexOf('node_modules') !== -1;
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks(module, count) {
return count >= 2;
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.(js|html)$/,
threshold: 10240,
minRatio: 0.8,
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
noInfo: true,
options: {
context: './',
},
}),
new HtmlWebpackPlugin({
title: 'KM Q&A',
filename: 'index.html',
template: './src/index.ejs',
favicon: './src/favicon.ico',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.HashedModuleIdsPlugin()
]);
} else {
config.entry.splice(1, 0, 'react-hot-loader/patch');
Array.prototype.push.apply(config.plugins, [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
title: 'KM Q&A',
filename: 'index.html',
template: './src/index.ejs',
inject: true,
favicon: './src/favicon.ico',
}),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
noInfo: false,
options: {
context: './',
},
}),
]);
}
module.exports = config;
{
"presets": [
[
"env",
{ "modules": false }],
"react"
],
"plugins": [
"react-hot-loader/babel",
"transform-object-rest-spread",
"transform-class-properties"
],
"env":{
"test":{
"presets": [
"env",
"react"
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties"
]}
}
}
{
"name": "react-starter",
"version": "1.0.0",
"main": "index.jsx",
"scripts": {
"start": "set NODE_ENV=development&& npm-run-all --parallel open:dev lint:watch npm:lock",
"prebuild": "npm run remove-dist && mkdir dist",
"build:prod": "set NODE_ENV=production&& webpack",
"build:dev": "set NODE_ENV=development&& webpack",
"lint": " esw src --color",
"lint:watch": "npm run lint --watch",
"open:dev": "webpack-dev-server",
"open:dist": "http-server ./dist -p 8081 -s -o",
"remove-dist": "rimraf ./dist",
"npm:lock": "npm shrinkwrap",
"test:dev": "set NODE_ENV=test&&Set TEST_ENV=development&&jest -u",
"test:prod": "set NODE_ENV=test&&Set TEST_ENV=production&&jest -u",
"coverage:dev": "set NODE_ENV=test&&Set TEST_ENV=development&&jest --coverage",
"coverage:prod": "set NODE_ENV=test&&Set TEST_ENV=production&&",
"installmodules": "npm install",
},
"license": "MIT",
"dependencies": {
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"detect-browser": "^2.0.0",
"font-awesome": "^4.7.0",
"prop-types": "^15.6.0",
"raf": "^3.4.0",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-hot-loader": "^3.1.3",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"axios-mock-adapter": "^1.10.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"compression-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.2.0",
"css-loader": "^0.28.7",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"eslint-watch": "^3.1.3",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"http-server": "^0.10.0",
"jest": "^21.2.1",
"node-sass": "^4.6.1",
"npm-run-all": "^4.1.1",
"postcss-loader": "^2.0.8",
"react-addons-perf": "^15.4.2",
"react-test-renderer": "^16.1.1",
"redux-mock-store": "^1.3.0",
"sass-loader": "^6.0.6",
"sinon": "^4.1.2",
"style-loader": "^0.19.0",
"system-bell-webpack-plugin": "^1.0.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"optionalDependencies": {
"bufferutil": "^3.0.3"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"automock": false,
"transform": {
"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"modulePathIgnorePatterns": [
"/node_modules/"
],
"collectCoverage": true,
"coverageReporters": [
"json",
"lcov",
"text"
]
}
}
关于reactjs - 如何在ES6 +的webpack的node_modules上使用babel loader?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47646121/
我正在使用 webpack 开始我的学习之路,但遇到了一个问题,我认为这是由 extract-loader 引起的。 .当webpack抓取我的HTML文件时,似乎无法正常编译,在使用import.m
我正在使用 tomcat 8,在 tomcat-home/config/catalina.properties ,有关于的部分 common.loader, server.loader and sha
在使用 import 语句时,我对区分 sass-loader 和 css-loader 有点困惑。据我所知,css loader resolve import statment(@import) 和
我的 webpack 加载器数组中有这个加载器: { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin('sty
我对 url-loader 、 file-loader 和 image-loader 感到很困惑。谁能解释一下 url-loader 、 file-loader 和 image-loader 的区别是
我有 page.css @imports index.css。 page.css 和 index.css 都有 display: flex Webpack.config.js 包含: module:
我在 webpack 中使用生产模式构建的多入口点最终 bundle 中导出的多入口编译 js 文件始终包含加载器内容。如何消除它们以及为什么包含它们? 重现 git clone https://gi
模板加载器找到模板但未加载模板 TemplateDoesNotExist at /cardpayment/ cardpayment.html Request Method: GET Reque
当我尝试运行 gradle tR (tomcatRun) 时出现此错误 A child container failed during start java.util.concurrent.Execu
Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].StandardContext[/projectna
我计划将 Webpack 用于一个项目,并且我正在使用 Html-loader + file-loader 设置我的工作流程,以获取带有图像动态 src 的生产 html 文件,正如 Colt Ste
我有一个巨大的 csv 文件,其中包含数百万条记录,我想使用 python 脚本将它加载到 Netezza 数据库中。我尝试了简单的插入查询,但速度非常非常慢。可以指出一些示例 python 脚本或一
我想将 ts-loader 与 babel-polyfill 一起使用,但不使用 babel-loader。但是当我尝试构建该项目时,我收到了此错误。谁能告诉我我缺少什么。 ERROR in ./sr
下面是我的 webpack.config.js 和 package.json module.exports = { entry: "./entry.js", output: { fi
我在两台不同的 PC 上遇到了一个问题。对于我的项目,我为开发安装了以下依赖项:(webpack webpack-cli @babel/core @babel/preset-env @babel/pr
模板文件保存在app目录下,但渲染时引发TemplateDoesNotExist异常: 模板加载器事后分析如下: Django 尝试按以下顺序加载这些模板: Using loader django.t
PHPUnit 手册说: If you point the PHPUnit command-line test runner to a directory it will look for *Test
我正在开发一个需要 html 的角度应用程序要提取为纯 HTML 文件的文件,同时应检查任何 要求这些图像(作为 Assets )。另外,图片是基于根路径的(所以 /images/something.
我们在 sql 加载器中遇到了问题。我们正在尝试将一个大约 46 亿行(近 340 GB)的数据文件加载到 2 个 oracle 表中,基于一些使用 Sql Loader 的条件。但是在加载了 42
我将 CSS 模块与 webpack css-loader 一起使用,然后将它们与 mini-css-extract-plugin 捆绑在一起。 这是我的配置的样子: { test: /\.c
我是一名优秀的程序员,十分优秀!