如何在ES6 +的webpack的node_modules上使用babel loader? [英] How to use babel loader on node_modules in webpack for ES6+?
本文介绍了如何在ES6 +的webpack的node_modules上使用babel loader?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个react项目，所有扩展名都是.js，没有一个使用.jsx.我下载了一个新的库react-pdf-js-infinite，它使用.jsx.在我的webpack中，加载程序是在所有node_modules上运行的异常.我如何设置它使其可以在我的node_module中的.jsx文件上运行.当我尝试使用webpack运行生产版本时，我经常遇到错误.说这个文件可能需要装载程序，并且是在构建过程中遇到组件类内的静态propTypes的ecma标准时.任何帮助将不胜感激.
I have a react project and all the extensions of everything is .js, none of them use .jsx. I downloaded a new library react-pdf-js-infinite and it uses .jsx. In my webpack the loader as exceptions running on all of node_modules. How do i set it up so that it will run on the .jsx file in my node_module. I constantly get an error when i am trying to run my production build with webpack for it. Saying this file might need a loader and it is when the build is encounter the ecma standard of static propTypes within the class of the component. Any help would be appreciated.
class PDF extends Component {
static propTypes = {
x: propType.String
}
}
推荐答案
这是您的Webpack配置的外观.这包含了所有的装载机 具有React redux Sass和其他实用程序的ES6.
this is how your webpack config should look like. this contains all the loaders for ES6 with React redux Sass and other utilities.
/* 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;
这应该是您的.babelrc文件
this should be your .babelrc file
{
"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"
]}
}
}
这是经过Jest测试的基本packages.json
here is the basic packages.json with Jest testing
{
"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"
]
}
}
这篇关于如何在ES6 +的webpack的node_modules上使用babel loader?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
