防止Babel-loader / webpack将es6-modules转换为es5

时间:2018-03-27 06:29:29

标签: javascript webpack ecmascript-6 babeljs babel-loader



module.exports = {
  bail: true,
  watch: true,
  target: 'web',
  entry: paths.allLibraryIndexJs,
  output: {
    path: paths.appLibraryBuild,
    filename: '[name].app.js',
    library: '[name]',
    libraryTarget: 'umd',
    publicPath: publicPath
  },
  externals: {
    lodash: {
      commonjs: 'lodash',
      commonjs2: 'lodash',
      amd: 'lodash',
      root: '_'
    },
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      root: 'React'
    },
    'props-types': {
      commonjs: 'props-types',
      commonjs2: 'props-types',
      amd: 'props-types',
      root: 'PropsTypes'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      root: 'ReactDOM'
    },
    redux: {
      commonjs: 'redux',
      commonjs2: 'redux',
      amd: 'redux',
      root: 'redux'
    },
    moment: {
      commonjs: 'moment',
      commonjs2: 'moment',
      amd: 'moment',
      root: 'moment'
    },
    'semantic-ui-react': {
      commonjs: 'semantic-ui-react',
      commonjs2: 'semantic-ui-react',
      amd: 'semantic-ui-react',
      root: 'semantic-ui-react'
    },
    'react-redux': {
      commonjs: 'react-redux',
      commonjs2: 'react-redux',
      amd: 'react-redux',
      root: 'react-redux'
    },
    'react-i18next': {
      commonjs: 'react-i18next',
      commonjs2: 'react-i18next',
      amd: 'react-i18next',
      root: 'react-i18next'
    }
  },
  resolve: {
    modules: [
      paths.appSrc,
      'node_modules'
    ],
    extensions: ['.js', '.json', '.jsx', 'svg', 'ttf', 'woff', 'eot', '.scss'],
    alias: {
      'react-native': 'react-native-web'
    }
  },

  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /\.(js|jsx)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter
            },
            loader: require.resolve('eslint-loader')
          }
        ],
        include: paths.appSrc
      },
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.json$/,
          /\.svg$/
        ],
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]'
        }
      },
      //{
      //  test: /\.(js|jsx)$/,
      //  include: paths.appSrc,
      //  loader: 'babel-loader',
      //  options: {
      //    compact: true
      //  }
      //},
      {
        test: /\.(css|scss)$/,
        loader: ExtractTextPlugin.extract(Object.assign({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: true
              }
            },
            {
              loader: 'sass-loader'
            },
            {
              loader: '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'
                  })
                ]
              }
            }
          ]
        },
        extractTextPluginOptions
      ))
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(svg|woff|woff2|eot)$/,
        loader: 'url-loader',
        options: {
          limit: 50000,
          mimetype: 'application/font',
          name: './fonts/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // new HtmlWebpackPlugin({
    //   inject: true,
    //   template: paths.appHtml,
    //   minify: {
    //     removeComments: true,
    //     collapseWhitespace: true,
    //     removeRedundantAttributes: true,
    //     useShortDoctype: true,
    //     removeEmptyAttributes: true,
    //     removeStyleLinkTypeAttributes: true,
    //     keepClosingSlash: true,
    //     minifyJS: true,
    //     minifyCSS: true,
    //     minifyURLs: true
    //   }
    // }),
    new webpack.DefinePlugin(env.stringified),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true, // React doesn't support IE8
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      }
    }),
    new ExtractTextPlugin(cssFilename)
  ],
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
}
&#13;
&#13;
&#13;

我正在使用webpack捆绑一个库。我在es6中开发它作为另一个项目的一部分,它使用单独的webpack配置转换为es5。我想使用webpack / babel-loader将它捆绑为库/ es6模块,但是无法找到防止babel-loader将其转换为es5的方法。如果我不使用babel-loader,它会导致我的模块解析失败&#39;错误。

我尝试在文档和StackOverflow中寻找解决方案,但无法找到它。请帮忙。 我正在附加我当前的webpack配置。

0 个答案:

没有答案