너는 package.json에 열거된 module의 의미를 알고 있는가? 나는 모른다. (browserify 관련편

오 - es20xx에서 - react로 - browserify이거나 webpack으로 - 파일 업데이트를 모니터링하고 브라우저를 업데이트하십시오 -
를 위해 구그를 하면서 깨달으면 package.json
  "devDependencies": {
    "@kjirou/utils": "0.0.3",
    "autoprefixer": "6.5.3",
    "babel-core": "6.18.2",
    "babel-plugin-espower": "2.3.1",
    "babel-preset-es2016": "6.16.0",
    "babel-preset-react": "6.16.0",
    "babel-register": "6.18.0",
    "babelify": "7.3.0",
    "browser-sync": "2.18.2",
    "browserify": "13.1.1",
    "dictify": "1.1.0",
    "eslint": "3.12.2",
    "espower-loader": "1.2.0",
    "fixpack": "2.3.1",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-postcss": "6.2.0",
    "gulp-rename": "1.2.2",
    "gulp-sass": "2.3.2",
    "jsdoc": "3.4.3",
    "keymirror": "0.1.1",
    "mocha": "3.2.0",
    "node-notifier": "4.6.1",
    "power-assert": "1.4.2",
    "react": "15.4.1",
    "react-dom": "15.4.1",
    "react-redux": "4.4.6",
    "redux": "3.6.0",
    "redux-create-reducer": "1.1.1",
    "redux-thunk": "2.1.0",
    "run-sequence": "1.2.2",
    "sanitize.css": "4.1.0",
    "string": "3.3.3",
    "uuid": "3.0.1",
    "vinyl-source-stream": "1.1.0",
    "watchify": "3.7.0"
  },

어쨌든, 잘 모르겠습니까? 내가되어있다.

그런 package.json에 흔한 모듈 중 browserify 관련 것을 이해하려고 했던 것이, 이 엔트리.
"구체적으로 연계시키기 위해 무엇을 하는가"는 이 엔트리에서는 다루지 않는다.

그림 react가 babel에서 browserify!



그림으로 하면 이런 느낌일 것이다


이 그림이 있다면


  • 큰 테두리로서는 「쓴 JS를 (brwserify로) browserify
  • 그 과정에서 쓴 JS는 「 변환 라는 구조를 경유해 babel로 transpile된다」

  • babel 은 당연히 brwserify와 의존이 없기 때문에 「사이를 연결하고 있는 것이 babelify
  • babelify는 browserify의 t 옵션을 통해 지정되며 변환기로 내부적으로 작동합니다.


  • 기타


  • babel + babel-preset-xxx는 browserify와 관련이 없으므로 기억하면 다른 번들러와 함께 사용할 수 있습니다.

  • watchify browserify 할 파일이 업데이트되면 위의 흐름에서 browserify 할 것입니다

  • browsersync 지정된 파일이 업데이트되면 브라우저를 업데이트합니다.

    부록


  • browserify의 트랜스포머 일람
  • htps : // 기주 b. 코 m / 스 bs ck / 그래서 - b 로 w 세리 fy / uki / st-o ft ran s fu rms

  • 좋은 웹페이지 즐겨찾기