如何将 browserify 添加到 yeoman 项目中？

Question

我想在我的 Yeoman 项目中使用 browserify 而不是 RequireJS。你能告诉我如何换掉它，以便我的 app/ 和 test/ 可以利用 module.exports 和 require() 吗？

Answer 1

这就是我所做的：

1. npm install grunt-browserify --save-dev
2. npm install coffeeify --save-dev

3. 在Gruntfile.js 中添加 grunt-browserify 步骤：

   browserify: {
       basic: {
           src: ['<%= yeoman.app %>/scripts/**/*.js', '<%= yeoman.app %>/scripts/**/*.coffee'],
           options: {
               transform: ['coffeeify']
           },
           dest: '.tmp/scripts/application.js'
       }
   }
   

4. 将步骤添加到并发/监视步骤，例如：

   concurrent: {
       server: [
           '...',
           'browserify'
       ],
       dist: [
           '...',
           'browserify'
       ]
   }
   
   watch: {
       coffee: {
           files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
           tasks: ['...', 'browserify']
       }
   }
   

5. 修改默认的 app/index.html 模板，所以 usemin 将连接和缩小，从这里：

   <!-- build:js scripts/main.js -->
   <script src="bower_components/jquery/jquery.js"></script>
   <script src="scripts/main.js"></script>
   <!-- endbuild -->
   
   <!-- build:js(.tmp) scripts/coffee.js -->
   <script src="scripts/hello.js"></script>
   <!-- endbuild -->
   

到这里：

    <!-- build:js({.tmp,app}) scripts/main.js -->
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="scripts/application.js"></script>
    <!-- endbuild -->