我得到这个错误与这个库https://github.com/react-native-web-community/react-native-web-linear-gradient/
错误链接https://github.com/react-native-web-community/react-native-web-linear-gradient/issues/1 错误详细信息:模块解析失败:意外标记(5:22)您可能需要适当的加载程序来处理此文件类型。
我的webpack:
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'babel-runtime': path.dirname(
require.resolve('babel-runtime/package.json')
),
'react-native': 'react-native-web',
'react-native-linear-gradient': 'react-native-web-linear-gradient'
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
baseConfig: {
extends: [require.resolve('eslint-config-react-app')],
},
ignore: false,
useEslintrc: false,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
};
制造问题的阶层:
import React, { PureComponent } from 'react';
import { View } from 'react-native';
export default class LinearGradient extends PureComponent {
static defaultProps = {
start: {
x: 0.5,
y: 0,
},
end: {
x: 0.5,
y: 1,
},
locations: [],
colors: [],
};
state = {
width: 1,
height: 1,
};
measure = ({ nativeEvent }) =>
this.setState({
width: nativeEvent.layout.width,
height: nativeEvent.layout.height,
});
getAngle = () => {
// Math.atan2 handles Infinity
const angle =
Math.atan2(
this.state.width * (this.props.end.y - this.props.start.y),
this.state.height * (this.props.end.x - this.props.start.x)
) +
Math.PI / 2;
return angle + 'rad';
};
getColors = () =>
this.props.colors
.map((color, index) => {
const location = this.props.locations[index];
let locationStyle = '';
if (location) {
locationStyle = ' ' + location * 100 + '%';
}
return color + locationStyle;
})
.join(',');
render() {
return (
<View
style={[
this.props.style,
{ backgroundImage: `linear-gradient(${this.getAngle()},${this.getColors()})` },
]}
onLayout={this.measure}
>
{this.props.children}
</View>
);
}
}
静态defaultProps和()=
这就是如何配置网页包以加载资产,例如图像(pngs
、svgs
、jpgs
等等):
npm安装--保存dev文件加载器
webpack.config.js
模块.exports.rules下的
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
现在,当您从
'./my image.png'
导入MyImage
时,该图像将被处理并添加到输出目录中,MyImage
变量将包含处理后该图像的最终url。
我认为这是因为ES7的特性。您是否安装了stage-0
以下是您的操作方法:
npm i——保存dev babel-preset-stage-0
,然后您应该将其包含到webpack.config.js
文件中,如下所示:
loader: "babel-loader", // or just "babel"
query: {
presets: [ <other presets>, 'stage-0']
}
或者将其添加到.babelrc
文件:
{
"presets": ["stage-0"]
}
使现代化
正如我之前所说,这个问题属于ES7功能。似乎像webpack
不能解决静态
关键字内的react-nate-web-linal-梯度
模块。所以我所做的来解决这个问题:
react native web linear gradient
复制到自己的组件LinearGradient
中。我没有改变其中的任何内容。结果我的页面上出现了渐变<代码>git项目链接。
希望这会有帮助!
部分修复
步骤:
1-npm在库中安装Babel Babel-cli--save-dev
2-I在package.json
脚本中添加“transfile”:“babel src/index.js——out file src/index transpiled.js”
3-<码>纱线转移性
4-我把ES5文件移到了我的代码里,它起作用了
更新-完全修复
我把我的src文件夹和库也包括到了babel中
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: [
/src\/*/,
/node_modules\/react-native-/,
],
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-native')],
cacheDirectory: true
}
},
问题内容: 我在这个库中遇到了这个错误https://github.com/react-native-web-community/react-native-web- linear-gradient/ 错误链接https://github.com/react-native-web-community/react-native-web-linear- gradient/issues/1 错误的 详细信
我用Webpack创建了我的项目,并在开发中使用了Vue.js,但是我不能注入
我正在学习反应,并试图用webpack创建一个样板。我遵循了一个教程,在他的视频作品的一切,但在我的电脑上,我得到的错误消息,一个适当的加载器需要处理一个特定的文件类型。 这就是错误产生的文件 以下是错误消息: ./src/index.js 5:16模块解析中出错失败:意外标记(5:16)您可能需要适当的加载程序来处理此文件类型。|从“./components/App”导入应用程序| ReactD
我有柱状图。带有以下代码的vue文件: 没有
我从webpack3升级了我的项目。x到网页4。28.4,当我运行用于生产的网页包时,它向我显示错误! 我使用happypack来提高编译速度! 它没有工作!有人能解决我的问题吗?非常感谢!
我有一个全新的拉威尔装置。使用npm run dev VUE编译文件时,我收到一个文件错误 您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件 拉雷维尔·韦里恩:“^8.12” Package.json 刃锉 应用程序。js 你好vue npm运行开发