{"id":481,"date":"2020-02-14T21:55:58","date_gmt":"2020-02-14T13:55:58","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=481"},"modified":"2021-05-14T11:56:12","modified_gmt":"2021-05-14T03:56:12","slug":"es6%e6%a8%a1%e5%9d%97%e5%8c%96%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/14\/es6%e6%a8%a1%e5%9d%97%e5%8c%96%e6%95%99%e7%a8%8b\/","title":{"rendered":"ES6\u6a21\u5757\u5316\u6559\u7a0b"},"content":{"rendered":"<pre class=\"pure-highlightjs\"><code class=\"\">## ES6-Babel-Browserify\u4f7f\u7528\u6559\u7a0b\n1. \u5b9a\u4e49package.json\u6587\u4ef6\n  ```\n  {\n    \"name\" : \"es6-babel-browserify\",\n    \"version\" : \"1.0.0\"\n  }\n  ```\n2. \u5b89\u88c5babel-cli, babel-preset-es2015\u548cbrowserify\n  * npm install babel-cli browserify -g\n\t* npm install babel-preset-es2015 --save-dev \n3. \u5b9a\u4e49.babelrc\u6587\u4ef6\n\t```\n\t{\n    \"presets\": [\"es2015\"]\n  }\n\t```\n4. \u7f16\u7801\n  * js\/src\/module1.js\n    ```\n    export function foo() {\n      console.log('module1 foo()');\n    }\n    export let bar = function () {\n      console.log('module1 bar()');\n    }\n    export const DATA_ARR = [1, 3, 5, 1]\n    ```\n  * js\/src\/module2.js\n    ```\n    let data = 'module2 data'\n    \n    function fun1() {\n      console.log('module2 fun1() ' + data);\n    }\n    \n    function fun2() {\n      console.log('module2 fun2() ' + data);\n    }\n    \n    export {fun1, fun2}\n    ```\n  * js\/src\/module3.js\n    ```\n    export default {\n      name: 'Tom',\n      setName: function (name) {\n        this.name = name\n      }\n    }\n    ```\n  * js\/src\/app.js\n    ```\n    import {foo, bar} from '.\/module1'\n    import {DATA_ARR} from '.\/module1'\n    import {fun1, fun2} from '.\/module2'\n    import person from '.\/module3'\n    \n    import $ from 'jquery'\n    \n    $('body').css('background', 'red')\n    \n    foo()\n    bar()\n    console.log(DATA_ARR);\n    fun1()\n    fun2()\n    \n    person.setName('JACK')\n    console.log(person.name);\n    ```\n5. \u7f16\u8bd1\n  * \u4f7f\u7528Babel\u5c06ES6\u7f16\u8bd1\u4e3aES5\u4ee3\u7801(\u4f46\u5305\u542bCommonJS\u8bed\u6cd5) : babel js\/src -d js\/lib\n  * \u4f7f\u7528Browserify\u7f16\u8bd1js : browserify js\/lib\/app.js -o js\/lib\/bundle.js\n6. \u9875\u9762\u4e2d\u5f15\u5165\u6d4b\u8bd5\n  ```\n  &lt;script type=\"text\/javascript\" src=\"js\/lib\/bundle.js\"&gt;&lt;\/script&gt;\n  ```\n7. \u5f15\u5165\u7b2c\u4e09\u65b9\u6a21\u5757(jQuery)\n  1). \u4e0b\u8f7djQuery\u6a21\u5757: \n    * npm install jquery@1 --save\n  2). \u5728app.js\u4e2d\u5f15\u5165\u5e76\u4f7f\u7528\n    ```\n    import $ from 'jquery'\n    $('body').css('background', 'red')\n    ```<\/code><\/pre>\n<p>\u00a0<\/p>\n\n\n<pre class=\"wp-block-code\"><code>import * as xxx from \u2018xxx\u2019: \u4f1a\u5c06\u82e5\u5e72export\u5bfc\u51fa\u7684\u5185\u5bb9\u7ec4\u5408\u6210\u4e00\u4e2a\u5bf9\u8c61\u8fd4\u56de\uff1b\r\n\r\nimport xxx from \u2018xxx\u2019\uff1a\uff08export default Din\uff09\u53ea\u4f1a\u5bfc\u51fa\u8fd9\u4e2a\u9ed8\u8ba4\u7684\u5bf9\u8c61\u4f5c\u4e3a\u4e00\u4e2a\u5bf9\u8c61\r\n\r\n\r<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>## ES6-Babel-Browserify\u4f7f\u7528\u6559\u7a0b 1. \u5b9a\u4e49package.json\u6587\u4ef6 &#8220;` { &#8220;name&#8221;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[6],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/481"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":1,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/481\/revisions"}],"predecessor-version":[{"id":635,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/481\/revisions\/635"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}