PROSAGA码农传奇-gulp-NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

0# 那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  
     <code>
 Webpack
 </code>
     是捆绑者。喜欢
     <code>
 Browserfy
 </code>
     它在代码库中查找模块请求（
     <code>
 require
 </code>
     要么
     <code>
 import
 </code>
    并递归地解决它们。更重要的是，你可以配置
     <code>
 Webpack
 </code>
     不仅要解决类似JavaScript的模块，还要解决CSS，图像，HTML等问题。特别让我兴奋的是什么
     <code>
 Webpack
 </code>
    ，您可以在同一个应用程序中组合已编译和动态加载的模块。因此，可以获得真正的性能提升，特别是在HTTP / 1.x上。你是怎么做到的我在这里举例说明
    <a href="http://dsheiko.com/weblog/state-of-javascript-modules-2017/" rel="noreferrer">
      http://dsheiko.com/weblog/state-of-javascript-modules-2017/
    </A>
    
作为捆绑者的替代品，人们可以想到
     <code>
 Rollup.js
 </code>
     （
    <a href="https://rollupjs.org/" rel="noreferrer">
      https://rollupjs.org/
    </A>
    ），它在编译期间优化代码，但剥离所有找到的未使用的块。
  
  
    对于
     <code>
 AMD
 </code>
    ， 代替
     <code>
 RequireJS
 </code>
     一个人可以去当地人
     <code>
 ES2016 module system
 </code>
    ，但装满了
     <code>
 System.js
 </code>
     （
    <a href="https://github.com/systemjs/systemjs" rel="noreferrer">
      https://github.com/systemjs/systemjs
    </A>
    ）
  
  
    此外，我会指出这一点
     <code>
 npm
 </code>
     通常用作自动化工具
     <code>
 grunt
 </code>
     要么
     <code>
 gulp
 </code>
    。查看
    <a href="https://docs.npmjs.com/misc/scripts" rel="noreferrer">
      https://docs.npmjs.com/misc/scripts
    </A>
    。我个人现在使用npm脚本只避免使用其他自动化工具，尽管在过去我非常喜欢
     <code>
 grunt
 </code>
    。使用其他工具，您必须依赖无数的软件包插件，这些插件通常写得不好而且没有被主动维护。
     <code>
 npm
 </code>
     知道它的包，所以你可以通过以下名称调用任何本地安装的包：
  
   <pre>
 <code>
 {
 "scripts": {
 "start": "npm http-server"
 },
 "devDependencies": {
 "http-server": "^0.10.0"
 }
}

</code>
 </pre>
  
    实际上，如果软件包支持CLI，您通常不需要任何插件。
  
</DIV>

1# 夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <BLOCKQUOTE>
    
      什么是webpack＆amp;的WebPack-dev的服务器？官方文档说它是一个模块捆绑器，但对我来说它只是一个任务运行器。有什么不同？
    
  </BLOCKQUOTE>
  
    <a href="https://github.com/webpack/webpack-dev-server" rel="noreferrer">
      的WebPack-DEV-服务器
    </A>
     是一个实时重装Web服务器
    
      的WebPack
    
     开发人员用它来获得他们所做的即时反馈。它应该只在开发期间使用。
  
  
    这个项目受到了很大的启发
    <a href="https://github.com/peerigon/nof5" rel="noreferrer">
      nof5
    </A>
     单元测试工具。
  
  
    
      的WebPack
    
     顾名思义将创建一个
    
      单
    
    的
      包
    </强>
    年龄
    的
      卷筒纸
    </强>
    。软件包将被最小化，并合并为一个文件（我们仍然生活在HTTP 1.1时代）。
    
      的WebPack
    
     组合资源（JavaScript，CSS，图像）和注入它们的魔力是这样的：
     <code>
 <script src="assets/bundle.js"></script>
 </code>
    。
  
  
    它也可以被称为
    
      模块捆绑器
    
     因为它必须了解模块依赖关系，以及如何获取依赖关系并将它们捆绑在一起。
  
  <BLOCKQUOTE>
    
      你会在哪里使用browserify？我们不能对node / ES6导入做同样的事情吗？
    
  </BLOCKQUOTE>
  
    你可以用
    
      Browserify
    
     在你将使用的完全相同的任务
    
      的WebPack
    
    。 - 
    
      的WebPack
    
     但是更紧凑。
  
  
    请注意
    <a href="https://gist.github.com/sokra/27b24881210b56bbaff7" rel="noreferrer">
      ES6模块加载器功能
    </A>
     在
    
      Webpack2
    
     正在使用
    
      System.import
    
    ，本地没有一个浏览器支持。
  
  <BLOCKQUOTE>
    
      什么时候你会在npm +插件上使用gulp / grunt？
    
  </BLOCKQUOTE>
  
    您可以
    <a href="https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/" rel="noreferrer">
      忘记
    </A>
    
      Gulp，Grunt，Brokoli，Brunch和Bower
    
    。直接使用npm命令行脚本，你可以在这里删除这些额外的包
    
      吞
    
    ：
  
   <pre>
 <code>
 var gulp = require('gulp'),
 minifyCSS = require('gulp-minify-css'),
 sass = require('gulp-sass'),
 browserify = require('gulp-browserify'),
 uglify = require('gulp-uglify'),
 rename = require('gulp-rename'),
 jshint = require('gulp-jshint'),
 jshintStyle = require('jshint-stylish'),
 replace = require('gulp-replace'),
 notify = require('gulp-notify'),

</code>
 </pre>
  
    你可以使用
    
      吞
    
     和
    
      咕噜
    
     为项目创建配置文件时配置文件生成器。这样您就不需要安装了
    
      约曼
    
     或类似的工具。
  
</DIV>

2# 生如夏花 | 2019-08-31 10-32

3# 部落用户 | 2019-08-31 10-32

4# 妖邪 | 2019-08-31 10-32