如何将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. 添加grunt-browserify步骤Gruntfile.js:

   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 -->