首页 文章

没有webpack的反应开发，有没有办法使用Gulp？

提问于
浏览 次
-1

虽然有些东西我喜欢Webpack，但我只喜欢它这么长时间，一旦它超过15行，它变得如此神秘，如此不可配置，而且非常耗时，我宁愿不用它来做任何事情，但是两件事情 .

  • 将es6 / jsx转换为当前的javascript格式 .

  • 解决依赖图 .

我宁愿直接在npm脚本或Gulp（首选）进行热重载，sass - > css，清理等 .

但是，我刚刚开始使用React，而且我只能看到Webpack在React Universe中所做的事情正在将JSX ES6转换为ES5格式 . 还有更多我还没有遇到React需要Webpack的地方 .

如果可能的话，我想根本不使用Webpack . 如果这就是它为React所做的一切，那么我想知道这个：使用Gulp我怎么能做上面提到的两件事？

javascript reactjs webpack gulp

1 回答

  • 1

    在做出这个决定之前要考虑一些事项 . 就像你说的那样，你很反应，所以可能你不知道在React Environment中使用的最好的工具，但是在使用gulp之前你应该更多 try .

    看一下这个片段，我会详细解释一下 .

    devServer: {
    inline: true,
    port: 8080,
    host: '0.0.0.0',
    historyApiFallback: true,
  },
  entry: './src/app/App.js',
  output: {
    path: path.join(__dirname, 'static'),
    publicPath: '/',
    filename: 'bundle.[hash].js',
    chunkFilename: 'chunk.[hash].js',
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [ ['es2015',{ modules: false }], 'react'],// insert ] 
          plugins: ['transform-object-rest-spread'],
        },
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        }),
      },
      {
        test: /.(mp4|png|jpg|woff(2)??|eot|otf|ttf|svg)(\?[a-z0-9=\.]+)?$/,
        use: 'url-loader?limit=100000',
      },
    ],
  },
  plugins: [CleanPlugin, HTMLWebpackPluginConfig, ExtractTextPluginCSS, FaviconPlugin],
  devtool: 'cheap-source-map',
};

    devServer ：这是将webpack-dev-server配置为在开发模式下使用的神奇工具的对象，并通过热重新加载查看输出 .

    rules ：这是webpack配置文件中最重要的部分，规则测试文件的扩展名，并根据创建的规则给予特殊处理 .

    在 .JSX 测试中，他们将测试所有.jsx文件，即根文件夹中的调用 . 预设用于为.jsx和插件创建特殊规则我只使用了一个启用spread-opertor的插件

    .css 文件的规则我必须使用2个加载器，一个用于css，另一个用于第一个失败（回退） .

    现在你的观点，scss文件，我使用带有css模块的scss，他们为每个css输出创建一个带有一些奇怪名称的块文件 . 使用此加载器，您可以使用简单导入 . CSS-MODULES用于我为每个组件创建的每个.scss文件，看起来很复杂？检查网址 . 例如ComponentA.JS，ComponentB.JS，ComponentA.scss，ComponentB.scss

    最后一条规则是静态文件图像和字体，这里解释不多 .

    插件行，必须插入您在配置文件中使用的所有插件 . 最后但并非最不重要的是带有源映射的 devtool 行，您可以检查chrome（或其他）devTools中的缩小代码，我喜欢将此工具与调试器一起使用 .

    我希望它可以帮助你找到方向，但即使你已经尝试过这个并且想要使用gulp with react：https://jonsuh.com/blog/integrating-react-with-gulp/

    回复于

相关问题